Card

Bordered, clipped surface — the standard container for a themed panel.

Preview

Card with header + body Card composed from NxProductHeader + body content.

Preview

CheckAC

Card body content.

HTMLReact

Copy

<div class="nx-card" data-nx-product="check"><div class="nx-header"><span class="nx-lockup">Check</span><span class="nx-header__avatar">AC</span></div><div class="nx-card__body"><p style="margin:0">Card body content.</p></div></div>

Copy

<NxCard>
  <NxProductHeader product="check" avatar="AC" />
  <div className="nx-card__body">Card body content.</div>
</NxCard>

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
className	string	""		Extra classes merged onto .nx-card.

Classes

Framework-agnostic classes

Class	Description
.nx-card	Surface: white, hairline border, 18px radius, clipped
.nx-card__body	Padded vertical stack, 14px gap

Accessibility

• No implicit role — the card is a visual container; give the content inside its own semantics (heading, list, form).

Do / Don’t

• ✓Do: Use NxCard as the outer wrapper for a themed panel (header + body).✕Don’t: Don't nest cards — flatten to one surface per panel.

Related

Product header KPI tile

View in spec →

View source: registry.js ↗