Skip to main content

Design System

Margin

Responsive margins

Use a breakpoint prefix to change the margin at specific breakpoints.

Resize your browser to see each breakpoint in action:

Code snippet
<div class="ds-u-fill--gray-dark">
  <div class="ds-u-margin--1 ds-u-sm-margin--2 ds-u-md-margin--3 ds-u-lg-margin--4 ds-u-xl-margin--5 ds-u-display--inline-block">
    <span class="ds-u-fill--background">Responsive margins</span>
  </div>
</div>