AccentCard

When to use

Surface grouped content with a visual category accent (status, division, priority). Use accordion mode for expandable sections; button mode when the whole card is clickable.

When NOT to use

Simple static containers — use Podium Card or layout primitives. Tables or dense data — use DataTable.

Podium primitives composed

• Podium Card
• Podium Button
• Podium Text

Props

Auto-generated from src/components/AccentCard/AccentCard.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

AccentCardProps

Prop	Type	Required	Description
accent	string	No	Left accent stripe color (any CSS color value or Podium variable).
accordionContent	ReactNode	No	Accordion mode: the content revealed when the accordion is expanded. Ignored when mode is not 'accordion'.
accordionValue	string	No	Accordion mode: Podium Accordion value identifier. Required when multiple AccentCards live inside the same parent <Accordion> so they can be toggled independently. Defaults to 'accent-card'.
buttonLabel	string	No	Button mode: label text for the trailing button. Ignored when mode is not 'button'.
children	ReactNode	Yes	Card content — rendered as the main body of the card.
dimmed	boolean	No	Reduce visual prominence (e.g. cancelled / timed-out states).
mode	'accordion' | 'button'	No	Interaction mode: - 'accordion' — card header is expandable; children render inside the collapsible region below the header. - 'button' — a Podium Button is rendered in the trailing slot. - undefined / not provided — static card with no interactive affordance.
onButtonClick	() => void	No	Button mode: click handler for the trailing button. Ignored when mode is not 'button'.
standalone	boolean	No	Accordion mode: when false, the card renders only the AccordionItem without wrapping it in its own <Accordion>. Use this when placing multiple AccentCards inside a shared parent <Accordion>. Defaults to true.

Examples

Default accent card

import { AccentCard } from '@nike/whisker-component-library';

<AccentCard title="Shipment delay" accentColor="var(--pds-color-yellow-600)">
  Carrier reported a weather delay. ETA updated to 4pm.
</AccentCard>;

Live playground