Utilities

Responsive Helpers

Hide something, its labels, or everything but its accessible name, by a condition.

Code

HTML

<div class="button-group max-md:hide-labels" role="group" aria-label="Bed actions, shown by default">
  <button type="button" class="button"><svg class="button__icon icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#Plus"/></svg><span>Add plant</span></button>
  <button type="button" class="button"><svg class="button__icon icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#Share"/></svg><span>Share</span></button>
</div>

Why it exists

Most layouts should reflow on their own, and hiding is what’s left for when they can’t. Removing something at a width takes it away from everyone at that width, including people who zoomed in and so got the narrow layout on a large screen. That’s why these helpers are for duplicates and labels, and never for the only way to do something.

Hidden isn’t one thing. hide removes an element for everyone, sr-only keeps the words for screen readers, voice control and translation, and hide-labels shortens a Button to its icon while the text stays as its name. Choosing the right one decides who still gets the content.

There’s one direction only: every class hides, and there is no show. To show something at one width, hide it at the others, so nothing depends on which display value a helper would restore.

When to use

To drop a duplicate at some widths, such as the navigation when a menu Button offers the same links.
To shorten controls to their icons, with hide-labels.
To keep words for screen readers only, with sr-only.
Not to rearrange things: Grids, Splits and Clusters reflow on their own.
Not to hide the only way to do something.

Rules

Never hide the only way to do something. Hide a duplicate (the navigation when a menu Button offers the same links), or a label whose icon and accessible name remain.
Prefer a container condition inside a component, so it adapts wherever it is placed. A container condition needs an ancestor with container-type: inline-size (.container-inline, .split, .sidebar, .header, .footer); without one it never matches.
Show by hiding: there is no show. To show something only below 48rem, hide it from 48rem: md:hide.

Shorten, Swap, or Keep for Screen Readers

Harvest (rhubarb, chard and kale) due this week

Code

HTML

<!-- Icons only below 48rem; the text stays the buttons' accessible names -->
<div class="button-group max-md:hide-labels" role="group" aria-label="Bed actions">
  <button type="button" class="button"><svg class="button__icon icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#Plus"/></svg><span>Add plant</span></button>
  <button type="button" class="button"><svg class="button__icon icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#Share"/></svg><span>Share</span></button>
</div>

<!-- A menu button in a narrow header, the navigation in a wide one -->
<div class="header">
  <div class="header__bar">
    <nav class="header__nav @max-3xl:hide" aria-label="Main, example">
      <a href="/plants" class="link link--plain">Plants</a>
    </nav>
    <button type="button" class="button @3xl:hide" popovertarget="site-menu">Menu</button>
    <div id="site-menu" popover class="popover">
      <menu class="menu" aria-label="Site menu">
        <li><a href="/plants" class="button"><span>Plants</span></a></li>
      </menu>
    </div>
  </div>
</div>

<!-- Words read by screen readers but not shown below 48rem -->
<p>Harvest <span class="max-md:sr-only">(rhubarb, chard and kale)</span> due this week</p>

Do and Don’t

Do	Don’t
Show something only below 48rem with `md:hide`.	Look for a `show` class.
Prefer a container condition inside a component.	Use a container condition with no container ancestor.
Hide a duplicate, or a label whose icon and name remain.	Hide the only way to do something.
Use `.sr-only` for words only screen readers need.	Use `display: none` on text that must still be read.

In Storybook

Responsive utilities

Menu