Card

Groups related content and actions. Outlined, elevated or filled.

Team members

Invite people and manage roles.

Invite

KSMP2 members

CancelSave

Elevated

Floats above the page.

For overlapping or draggable cards.

Filled

Sits on bg-secondary.

For cards inside white panels.

CardLive · light and dark follow the theme switch

Usage

import { Card } from '@stanvision/atomus-react';

<Card
  title="Team members"
  supportingText="Invite people and manage roles."
  headerAction={<Button hierarchy="outline" size="sm">Invite</Button>}
  footer={<Button hierarchy="primary" size="sm">Save</Button>}
>
  …content
</Card>

A container that groups related content and actions.

Provide

• title, supportingText, headerAction (Figma: Title, Supporting text, Header action).
• children — the Content slot; footer — buttons aligned right.
• variant — outlined · elevated · filled; padding — md 16 · lg 24.

Don’t

• Don’t nest cards; use dividers or a filled card instead.
• Don’t add a coloured left border to signal status — use Alert or Badge.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.