Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Styling contract

Card styling is slot-driven. Target slot hooks and wrapper data attributes so headless and wrapper implementations stay visually aligned.

State and slot hooks

HookWhereUse
data-slot="card"RootContainer layout, border, surface tone, and spacing.
data-slot="card-header"HeaderTitle/description spacing rules.
data-slot="card-content"ContentBody rhythm and typography normalization.
data-slot="card-footer"FooterFooter alignment and action spacing.
data-slot="card-media"MediaMedia aspect ratio and clipping.
data-slot="card-actions"ActionsAction row layout and optional start/end alignment.
data-slot="card-link"LinkLink styling and disabled semantics.
data-variant, data-tone, data-paddingtng-card rootVariant, tone, and spacing theming controls.
data-interactive, data-elevatedtng-card rootHover/focus states and elevation treatment.

CSS starter

Card styling contract

css
[data-slot="card"] {
  display: grid;
  gap: 0.85rem;
  border: 1px solid var(--tng-semantic-border-strong);
  border-radius: 1rem;
}

[data-slot="card"][data-variant="outline"] {
  background: var(--tng-semantic-background-canvas);
}

[data-slot="card"][data-tone="primary"] {
  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, var(--tng-semantic-border-strong));
}

[data-slot="card"][data-interactive]:hover {
  border-color: var(--tng-semantic-accent-brand);
}

[data-slot="card-actions"][data-align="start"] {
  justify-content: flex-start;
}

[data-slot="card-link"][aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
}