# Utilities overview

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]`

<EmbeddedExample>
  <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>
</EmbeddedExample>