Syntax

Screen Readers

Style utility for imporving the accessibility with screen readers.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="sr-only:hover sr-only@sm sr-only@dark sr-only@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.