Card

The base surface for every panel — KPI tiles, activity items, the "Requires Your Attention" block, the dark hero.

Selector: tip-card

API

Name	Type	Default	Description
`variant` (input)	`CardVariant` = `'default' \| 'highlight' \| 'inverse' \| 'flat'`	`'default'`	`default` white card; `highlight` amber-tinted (attention callouts); `inverse` dark surface (hero); `flat` white, no shadow.
`accent` (input)	`CardAccent \| undefined` = `'gold' \| 'emerald' \| 'red'`	`undefined`	Adds a 3px colored left border.
`padding` (input)	`string`	`'var(--space-5)'`	Inline padding override — set to `'0'` when the card hosts its own full-bleed layout (e.g. Orders' table card).
`interactive` (input)	`boolean`	`false`	Switches cursor to `pointer` for clickable cards.
default slot	content	—	Card body.

Usage

<tip-card variant="highlight" accent="gold" class="home__attention">
  <div class="home__attention-inner">…</div>
</tip-card>

<tip-card [padding]="'0'"> <!-- Orders table card, owns its own toolbar/table layout --> </tip-card>

Notes

accent sets border-left-color inline via accentColor(), mapping gold → var(--tip-gold-500), emerald → var(--tip-emerald-500), red → var(--tip-red-600). Combine with any variant.
inverse uses --shadow-hero (deep dark-surface shadow) instead of the standard --shadow-sm/--shadow-xs ladder.
Card sets cursor: default by default — remember [interactive]="true" for clickable cards rather than relying on a child button's own cursor.