Skip to main content

Design System

Padding

Responsive padding

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

Resize your browser to see each breakpoint in action:

Code snippet
<div class="ds-base--inverse">
  <div class="ds-u-padding--1 ds-u-sm-padding--2 ds-u-md-padding--3 ds-u-lg-padding--4 ds-u-xl-padding--5">
    Responsive padding
  </div>
</div>