Health Design System

Spacing 

<div style="background: lightblue">
    <p>Content above</p>
</div>
<div class="" style="background: lightpink">
    <p>Content</p>
</div>
<div style="background: lightgreen">
    <p>Content below</p>
</div>

Responsive spacing classes like sm:margin-top–standard or lg:margin-bottom–large apply top/bottom margins at specific screen sizes and up (sm, md, lg). Margin sizes include:

  • none
  • small
  • standard (1.5rem)
  • large (3rem)

Use the format [screen]:margin-[top|bottom]–[size] to control vertical spacing responsively.

// Example:
margin-top--large sm:margin-top--standard md:margin-top--none