Components / status

status · @awesome-ds/react

Card

Surface container for grouped content.

Rules: rule.foundations.semantic-tokens

State matrix

idlerequired

Anatomy

  • grouped surface
  • optional title
  • body content

Keyboard contract

The surface itself is static; interactive descendants retain independent focus targets.

Screen-reader contract

Semantic descendants define structure; the entire card is not falsely announced as a button.

Content rules

  • Keep one clear subject per card.
  • Avoid competing nested calls to action.

Public API

PropTyperequiredDescription
titlestring—Card heading
childrenReactNoderequiredGrouped content

Adaptation contracts

RTL
Align status copy to inline-start and keep number/value semantics locale aware.
High contrast
Expose status with text, shape, or system color rather than authored color alone.
Reduced motion
Stop looping indicators where possible and retain a textual status.

Verification IDs

Card/semantic-surface

Live

Live

Card title

Card body content.

Copyable example

import { Card } from "@awesome-ds/react";

<Card title="Title">Body</Card>