Display

Display utilities control element visibility for different contexts.

• .hidden: Remove an element from both visual display and screen readers.
• .invisible: Hide an element from visual display and screen readers, but keep its space in the layout.
• .sr-only: Hides an element visually but keeps it accessible for screen readers.

Responsive Visibility

Class	xs	sm	md	lg	xl	2xl	3xl
.hidden-xs-only	❌	✅	✅	✅	✅	✅	✅
.hidden-sm-only	✅	❌	✅	✅	✅	✅	✅
.hidden-md-only	✅	✅	❌	✅	✅	✅	✅
.hidden-lg-only	✅	✅	✅	❌	✅	✅	✅
.hidden-xl-only	✅	✅	✅	✅	❌	✅	✅
.hidden-2xl-only	✅	✅	✅	✅	✅	❌	✅
.hidden-3xl-only	✅	✅	✅	✅	✅	✅	❌
.hidden-sm	✅	❌	❌	❌	❌	❌	❌
.hidden-md	✅	✅	❌	❌	❌	❌	❌
.hidden-lg	✅	✅	✅	❌	❌	❌	❌
.hidden-xl	✅	✅	✅	✅	❌	❌	❌
.hidden-2xl	✅	✅	✅	✅	✅	❌	❌
.hidden-3xl	✅	✅	✅	✅	✅	✅	❌
.hidden-no-sm	❌	✅	✅	✅	✅	✅	✅
.hidden-no-md	❌	❌	✅	✅	✅	✅	✅
.hidden-no-lg	❌	❌	❌	✅	✅	✅	✅
.hidden-no-xl	❌	❌	❌	❌	✅	✅	✅
.hidden-no-2xl	❌	❌	❌	❌	❌	✅	✅
.hidden-no-3xl	❌	❌	❌	❌	❌	❌	✅

Accessibility

Choosing the right utility

Class	Visual	Screen readers	Layout space
.hidden	Hidden	Hidden	Removed
.invisible	Hidden	Hidden	Preserved
.sr-only	Hidden	Visible	Removed

• Use .sr-only for content that sighted users don’t need but screen readers should announce (labels, descriptions, status text).
• Use .hidden (display: none) to remove content from everyone.
• Use .invisible (visibility: hidden) to hide content while preserving its space in the layout.

Prefer aria-label over .sr-only for short labels

For icon buttons and other elements that need a short accessible name, prefer aria-label over a .sr-only span.

Why?

• Simpler DOM — aria-label is a single attribute; .sr-only requires an extra element plus CSS.
• No CSS dependency — if styles fail to load, .sr-only text becomes visible. aria-label has no visual footprint.
• Clearer intent — aria-label explicitly signals “this is the accessible name” to anyone reading the code.
• No layout side effects — the CSS technique behind .sr-only (clip, position: absolute, width: 1px) can occasionally cause subtle scrollbar or focus quirks.

<!-- ✅ Preferred -->
<button class="tng-icon-button" aria-label="Close">
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

<!-- ❌ Avoid for simple labels -->
<button class="tng-icon-button">
  <i class="tng-icon icon-close" aria-hidden="true"></i>
  <span class="sr-only">Close</span>
</button>

When .sr-only is still the right choice:

• Appending extra context to existing text (e.g. <a href="…">Read more<span class="sr-only"> about pricing</span></a>).
• Longer passages that benefit from being real DOM content for translation tools.
• Content that must participate in browser “find in page”.

Responsive visibility

Responsive visibility classes (.hidden-sm, .hidden-no-md, etc.) affect screen readers too — content hidden at a breakpoint is inaccessible at that breakpoint. If the content should remain available to assistive technologies at all sizes, use .sr-only instead.