Card

A layout primitive for grouping content into a visually distinct surface. All visual properties use design tokens so cards respect the consumer’s theme.

Add via CLI

npx @a2ra/cli add card

Sizes

Without border

Example JSON

{
  "type": "Card",
  "props": { "padding": "lg", "shadow": "md" },
  "children": [
    { "type": "Text", "props": { "as": "h3", "weight": "semibold" }, "children": "Usage this month" },
    { "type": "Text", "props": { "size": "2xl", "weight": "bold" }, "children": "12,483" }
  ]
}

Props

Prop	Type	Description
padding	none sm md default lg	Internal padding
shadow	none sm default md lg	Drop shadow depth
radius	none sm md default lg	Border radius
border	true default false	Show a border
children	node[]	Content rendered inside the card

Notes

• Card is a plain <div> with no semantic role. Wrap with a parent layout node if landmark semantics are needed.
• border: false combined with a shadow is the standard “floating card” look.
• Nest Form or Flex inside Card to build structured layouts.