Skip to main content
U.S. Flag

An official website of the United States government


The design system's layout, utility, and typography classes are built with responsive web design in mind and is built to be mobile-first.


Use the breakpoint prefixes sm, md, lg, and xl to apply styles at different viewport sizes. For example: .ds-u-lg-display--none sets an element's display property to none when the viewport is 1024px or wider.

PrefixBreakpointSass variableDescription
min-width(0px)$media-width-xsViewports 0px and wider
smmin-width(544px)$media-width-smViewports 544px and wider
mdmin-width(768px)$media-width-mdViewports 768px and wider
lgmin-width(1024px)$media-width-lgViewports 1024px and wider
xlmin-width(1280px)$media-width-xlViewports 1280px and wider

What supports a breakpoint prefix

In order to reduce code bloat, not everything supports a breakpoint prefix. Only the items below support breakpoint prefixes.

Additional usage examples are available on the pages listed above.