Variants

Minimal set of CSS classes that add visual variation to the Semantic Styling, without affecting the underlying semantics.

Why do we need them?

The purpose of ARIA is to communicate semantics and interaction state to assistive technologies: pressed, expanded, selected, disabled, current, etc. Things like This button is visually less important is a presentation concern, not an accessibility semantic.

Available Variants

Variant	Description	Elements
.card	Visual container with background, shadow, and optional header/footer	Any block element
.container	Responsive width wrapper with horizontal padding	Any block element
.secondary	Lower-emphasis style for links and buttons	<a>, <button>
.contrast	High-contrast style for links, buttons, and accordions	<a>, <button>, <details>
.ghost	Transparent background with colored text/border	<button>, <details>
.striped	Alternating row background colors	<table>