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

Visible

Visible utility classes allow authors to show content at specific screen sizes.

Overall usage

Used in conjuntion with hidden 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.

---

All sizes

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

---

Visible at xs only

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

---

Visible at sm only

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

---

Visible at md only

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

---

Visible at lg only

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