Hidden

When to use it

The Hidden utility is used to hide content either visually or completely, including from screen readers. It provides a way to manage the visibility of elements based on different conditions, such as screen size or accessibility requirements.

Variants

• Visually Hidden: Use the .u-hidden--visually class to hide content visually but keep it accessible for screen readers.
• Completely Hidden: Use the .u-hidden class to hide content for all, including screen readers.
• Responsive Hidden: Use the .u-hidden-(xs|sm|md|lg) classes to hide content for all, including screen readers, only on certain screen sizes.

What it looks like

Code examples

All screens

<p>Hide the last word in this <span class="u-hidden--visually">sentence</span></p>
<p>Hide the last word in this <span class="u-hidden">sentence</span></p>

Screen size aware

<p class="u-hidden-xs">This text is hidden on extra small screens (xs)</p>
<p class="u-hidden-sm">This text is hidden on small screens (sm)</p>
<p class="u-hidden-md">This text is hidden on medium screens (md)</p>
<p class="u-hidden-lg">This text is hidden on large screens (lg)</p>

Accessibility notes

Make sure you understand the different use cases for u-hidden and u-hidden--visually. If something is not supposed to seen nor be read out in a screen reader, it's the former you want. If a heading bothers you, but it adds meaning to a screen reader user, use the latter.

TIP

The aria-hidden="true" attribute produces the opposite effect of the u-hidden--visually class. It hides content from assistive technology, but not visually. This can be helpful in cases where there are visual cues that screen readers do not need to announce, such as decorative icons that accompany text labels.