Utilities

What it is

Single-purpose classes for any element. utilities.css loads last, so a utility wins over a component rule of equal specificity by source order.

When to use

• .hs-hide-below-md: a feature that does not work on phones, such as Add to LinkedIn. LinkedIn's add-to-profile form opens on desktop web only.

When not to use

• To shorten or simplify a layout on phones: change the component's own mobile-first rules.
• To hide text from sight but keep it for screen readers: use .hs-visually-hidden.
• To hide content that works on phones but feels long: keep it and make it compact.

Rules

• Put the utility on the outermost element of the feature: the list, not each item.
• .hs-hide-below-md hides below 48rem (768px). From md up, the element keeps its own display.
• Never add !important. A utility that loses to a component rule means the component selector is too specific.
• Load utilities.css after every component file.

Accessibility

• display: none also hides the element from screen readers. Use it only when the feature fails for every reader at that width.

Variants

Hide below md

The link list disappears below 48rem. Narrow the window to check.

<ul class="hs-credential__links hs-hide-below-md">
  <li><a class="hs-link" href="https://www.linkedin.com/profile/add" data-ph-capture-attribute-cta="linkedin_add" data-ph-capture-attribute-cta-loc="profile-credential">Add to LinkedIn</a></li>
</ul>