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