<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:
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