Card

A compound surface component — Card, CardHeader, CardBody, CardFooter — with configurable rounding, shadow, padding, margin, and a hover-lift animation.

Preview

Project report

Last updated 2 hours ago

Q2 metrics up 14% vs last quarter. All KPIs on track.

Debayan SenFrontend EngineerPro

Hover mehoverable + shadow="md"

Compound usage

import { Card, CardHeader, CardBody, CardFooter, Button } from "anexui";

<Card shadow="sm" rounded="xl">
  <CardHeader>Card title</CardHeader>
  <CardBody>
    <p>Card content goes here.</p>
  </CardBody>
  <CardFooter>
    <Button variant="ghost" size="sm">Cancel</Button>
    <Button variant="primary" size="sm">Save</Button>
  </CardFooter>
</Card>

Standalone card (with padding)

When not using sub-components, pass padding to add internal spacing. The recommended default is "2rem":

<Card padding="2rem" rounded="lg" shadow="md">
  <p>Simple card — no sections needed.</p>
</Card>

Rounded variants

<Card rounded="none">Sharp corners</Card>
<Card rounded="sm">Slight rounding</Card>
<Card rounded="md">Medium rounding</Card>
<Card rounded="lg">Large rounding</Card>
<Card rounded="xl">Extra large (default)</Card>
<Card rounded="2xl">2XL rounding</Card>
<Card rounded="full">Full / pill</Card>

Shadow variants

<Card shadow="sm">Subtle shadow</Card>
<Card shadow="md">Medium shadow</Card>
<Card shadow="lg">Large shadow</Card>
<Card shadow="xl">Extra large shadow</Card>

Hoverable (lift animation)

Adds a smooth translateY lift and enhanced shadow on hover. Respects prefers-reduced-motion.

<Card hoverable shadow="sm" rounded="xl" padding="2rem">
  Hover to lift
</Card>

Product card example

import { Card, CardBody, Button, Badge, Stack } from "anexui";

<Card shadow="md" rounded="xl" hoverable style={{ maxWidth: 280 }}>
  <div style={{ height: 160, background: "var(--color-primary-subtle)" }} />
  <CardBody>
    <Stack direction="row" justify="between" align="center">
      <span style={{ fontWeight: 600 }}>Wireless Headphones</span>
      <Badge variant="success" size="sm">In stock</Badge>
    </Stack>
    <Stack direction="row" justify="between" align="center">
      <span style={{ fontWeight: 700 }}>$129.99</span>
      <Button size="sm" variant="primary">Add to cart</Button>
    </Stack>
  </CardBody>
</Card>

import { Card, CardBody, CardFooter, Avatar, Badge, Button, Stack } from "anexui";

<Card shadow="sm" rounded="xl" style={{ maxWidth: 300 }}>
  <CardBody>
    <Stack direction="column" gap="3" align="center">
      <Avatar initials="DS" size="xl" status="online" />
      <Stack direction="column" gap="1" align="center">
        <span style={{ fontWeight: 700 }}>Debayan Sen</span>
        <span style={{ color: "var(--color-text-subtle)" }}>Frontend Engineer</span>
        <Badge variant="primary">Pro</Badge>
      </Stack>
    </Stack>
  </CardBody>
  <CardFooter>
    <Stack direction="row" gap="2" justify="center">
      <Button variant="outline" size="sm">Message</Button>
      <Button variant="primary" size="sm">Follow</Button>
    </Stack>
  </CardFooter>
</Card>

Card Props

| Prop | Type | Default | Description | |---|---|---|---| | rounded | "none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full" | "xl" | Border-radius preset | | padding | string \| number | — | Inline padding override (e.g. "2rem" or 32). For standalone cards. | | margin | string \| number | — | Inline margin override | | shadow | "none" \| "sm" \| "md" \| "lg" \| "xl" | — | Box-shadow preset | | hoverable | boolean | false | Lifts the card on hover via translateY + shadow |

All standard HTML <div> attributes (className, style, onClick, etc.) are also accepted.

CardHeader, CardBody, and CardFooter accept className and children.

Documentation