Utility classes

• Introduction
• Color
• Background-color
• Font-size
• Font-family
• Text-align
• Text-transform
• Hidden
• Visible
• Float
• Clear
• Clearfix
• Border
• Margin
• Padding
• Row-padding
• Image

Hidden

Hidden utility classes can be used to shorten instructions or button texts at smaller screen sizes where there is less screen space.

Overall usage

Used in conjuntion with visible classes to hide/show content at specific screen sizes.

Accessibility

Hiding content can present issues for assistive technologies so these utility classes should be used carefully. Meaningful content should never be completely removed.

---

Hidden at all sizes

<span class="u-hidden">Hidden at all sizes</span>

---

Hidden at xs only

<span class="u-hidden-xs">Hidden at xs only</span>

---

Hidden at sm only

<span class="u-hidden-sm">Hidden at sm only</span>

---

Hidden at md only

<span class="u-hidden-md">Hidden at md only</span>

---

Hidden at lg only

<span class="u-hidden-lg">Hidden at lg only</span>