EDS block · living style guide

Safety Bar

Scrollable, collapsible ISI tray. Pick a brand to see the token-to-block contract: the block markup never changes — only the --eds-* token layer (a body.brand-* override) does.

Brand

Demo page body

Scroll down to reach the inline ISI; the docked bar steps aside via the IntersectionObserver. Tap the bar to expand the full sheet.

Placeholder marketing copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus, arcu vitae bibendum tempus, urna nisl posuere lectus.

Quisque venenatis, justo non hendrerit dignissim, urna metus pretium dui, a varius nisl massa vitae nibh. Pellentesque habitant morbi tristique.

Use

MEDICATION X is a fictional prescription medicine used for prototyping only. This is not real medical information.

Important Safety Information

Do not use MEDICATION X if you have had a serious allergic reaction to it or any of its ingredients. Tell your doctor about all your medical conditions.

Before using

Tell your healthcare provider about all the medicines you take. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Possible side effects

The most common side effects in this fictional example include headache, upper respiratory symptoms, injection-site reactions, and tiredness.

What to tell your doctor

Tell your doctor if you have an infection that does not go away. Pellentesque habitant morbi tristique senectus et netus.

Miscellaneous ISI

This MiscISI shows inline always, but only appears in the tray when "Include MiscISI" is on. Please see full Prescribing Information and Medication Guide.