Health Design System

Spacing: Margin Top 

<div style="background: lightblue">
    <p>Content above</p>
</div>
<div class="margin-top--large sm:margin-top--standard md:margin-top--none" 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
  • Handle: @spacing--margin-top
  • Preview:
  • Filesystem Path: components/01-components/utilities/spacing/spacing.hbs