Accessibility & Display

Utility classes for screen-reader-only content, display toggles, responsive hiding, and cursor styles.

Visually Hidden

Use .ro-u-visually-hidden to hide content visually while keeping it available to screen readers (for example, accessible labels on icon buttons).

<button class="ro-btn ro-shape-icon">
<span class="ro-u-visually-hidden">Close dialog</span>
<i class="ro-icon ro-icon-x-small"></i>
</button>

Preview

Close dialog

Display

Class	Description
.ro-u-d-flex	display: flex
.ro-u-d-none	display: none

<div class="ro-u-d-flex ro-stack ro-gap-2">Flex container</div>
<div class="ro-u-d-none">Hidden element</div>

Responsive Hide

Hide elements at specific breakpoints:

Class	Hidden when viewport is
.ro-u-lt-d-none	≤ 1439px (laptop and below)
.ro-u-tb-d-none	≤ 1023px (tablet and below)
.ro-u-mob-d-none	≤ 767px (mobile)

<span class="ro-u-mob-d-none">Hidden on mobile</span>
<span class="ro-u-tb-d-none">Hidden on tablet and below</span>

Cursors

Class	Cursor
.ro-u-cursor-pointer	pointer
.ro-u-cursor-drag	grab
.ro-u-cursor-default	default

<button class="ro-btn ro-u-cursor-pointer">Clickable</button>
<div class="ro-demo-box ro-u-cursor-drag">Draggable</div>

Preview

Clickable

Draggable