Primitives

Anchor

A link. Underlined by default, and not as decoration: colour alone is not an affordance, and a link that is only accent-coloured text disappears for anyone who cannot separate it from the prose.

plain markup — no library on the page

Read the token reference first.

Code

index.html

<p class="aura-text aura-text--body">
  Read the <a class="aura-anchor" href="#">token reference</a> first.
</p>

The markup above is the whole API — there is no wrapper in any of the four packages, because a component here would set a class and add nothing. Write it as it stands, in whichever framework you are in.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-anchor	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

colour: var(--accent)
underline: 1px, 2px on hover · offset 2px
focus: var(--focus-w) var(--focus-color) · var(--focus-offset)