Arcana UI
Components

Card

Container for grouping related content with optional header, body, and footer sections.

Import

import { Card, CardHeader, CardBody, CardFooter } from '@arcana-ui/core'

Usage

{/* Simple card */}
<Card>
  <CardBody>
    <p>Card content here.</p>
  </CardBody>
</Card>
 
{/* Full card */}
<Card>
  <CardHeader>
    <h3>Card title</h3>
    <p>Subtitle or description</p>
  </CardHeader>
  <CardBody>
    <p>Main content area with padding.</p>
  </CardBody>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <Button>Confirm</Button>
  </CardFooter>
</Card>
 
{/* Clickable card */}
<Card hoverable onClick={handleClick}>
  <CardBody>Click me</CardBody>
</Card>
 
{/* Flat (no shadow) */}
<Card variant="flat">
  <CardBody>Flat card</CardBody>
</Card>

Card Props

PropTypeDefaultDescription
variant'elevated' | 'flat' | 'outlined''elevated'Visual style
hoverablebooleanfalseAdd hover lift effect
padding'none' | 'sm' | 'md' | 'lg'—Override default body padding
classNamestring—Additional CSS classes
...restHTMLAttributes<HTMLDivElement>—All native div attributes

CardHeader / CardBody / CardFooter

Each subcomponent accepts className and children. They handle spacing and borders automatically.

<Card>
  <CardHeader>
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <h3>Project Alpha</h3>
      <Badge variant="success">Active</Badge>
    </div>
  </CardHeader>
  <CardBody>
    <p>48 open issues · 12 pull requests</p>
  </CardBody>
  <CardFooter>
    <Button size="sm" variant="ghost">View details</Button>
  </CardFooter>
</Card>

Accessibility

  • Renders as a <div> — not inherently interactive
  • When hoverable and onClick are used, add role="button" and tabIndex={0} for keyboard access, or use an anchor tag
  • Use proper heading hierarchy inside cards

Previous

Avatar

Next

Modal

On this page