A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element.

Together, they can form a variety of UI patterns. You won't always want to use combinations of utilities to generate more complicated patterns, but the option is there. Once you've identified a set of traits that seem to be reused a lot, it's a good time to consider turning those into a component.

Format: .ds-u-[NAME]

<div class="ds-u-fill--secondary ds-u-padding--3">
  <p class="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">
    Hello world
  </p>
</div>