Layout

Spacer

A flex: 1 shim that pushes its siblings apart. Hidden from assistive tech.

plain markup — no library on the page

Members

Code

index.html

<div class="aura-card" style="width:100%;">
  <div class="aura-flex" style="--aura-dir:row;--aura-gap:var(--space-4);--aura-align:center;">
    <h3 class="aura-text aura-text--h3" style="">Members</h3>
    <div class="aura-spacer" aria-hidden="true"></div>
    <button type="button" class="aura-btn aura-btn--secondary">Invite</button>
  </div>
</div>

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-spacer	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

grow: flex: 1 1 auto
requires: флекс-родителя