Card

A simple unstyled container element. Pass data-color and data-size to drive your design token styles.

Preview

Usage


import { Card } from '@wire-ui/react'
 
<Card data-color="blue" data-size="large" className="p-4 rounded-xl border">
  Card content
</Card>

Props

All standard HTMLAttributes<HTMLDivElement> — className, onClick, etc. data-color and data-size are passed through as standard HTML attributes and used as CSS hooks.

Styling with data attributes


[data-color="blue"]  { background: var(--color-blue-50); }
[data-color="green"] { background: var(--color-green-50); }
[data-size="small"]  { padding: var(--space-2); }
[data-size="large"]  { padding: var(--space-6); }