Card

A quiet boundary for related content, with consistent spacing.

Interactive preview

Live specimenTry the component

Workspace

Give related content a clear boundary.

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add card

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

React

<Card padding="md" variant="outline">
  <h3>Workspace</h3>
  <p>Your projects, together.</p>
</Card>

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`variant`	`outline \| subtle`	`outline`
`padding`	`none \| sm \| md \| lg`	`md`

Card renders a div. Supply headings and meaningful structure inside it. Use actual links or buttons for actions.