Product header
Tinted header bar holding the product lockup and an optional avatar.
Preview
With avatar
CheckAC
<div class="nx-header" data-nx-product="check"><span class="nx-lockup">Check</span><span class="nx-header__avatar">AC</span></div><NxProductHeader product="check" avatar="AC" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
product | "ord"|"check"|"point"|"cert"|"doc" | — | Required | Which accent ramp themes the bar. |
avatar | string | undefined | Optional initials shown in a circular avatar. |
Classes
| Class | Description |
|---|---|
.nx-header | Tinted bar, accent-50 bg, accent-100 bottom border |
.nx-header__avatar | 26×26 circle, accent fill, white initials |
Accessibility
- The lockup's SVG is aria-hidden; the accessible name comes from the lockup's aria-label ("<Prefix>NX").
Do / Don’t
- Do: Pair with NxCard as the panel's top strip.Don’t: Don't put more than one primary action inside the header.