# Utilities > Single-purpose classes that sit on any element, such as hiding a feature on phones. - Block class: `.hs-hide-below-md` - CSS: `components/utilities.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/utilities-round.html - Variants: Hide below md - HTML page: https://brand.honorsociety.org/components/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. ```html ```