Skip to main content

U.S. flagU.S. flag

An official website of the United States government

CMS Design System

CMS Design System v2 is released!  See our migration guide.

Padding

Responsive padding

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

New tab
Code snippet
<div class="ds-u-fill--primary-alt" style="max-width: fit-content;">
  <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"
  >
    <span class="ds-u-fill--white">Responsive padding</span>
  </div>
</div>