Card

The Card component is a flexible container built with React Aria and styled using StyleX. It supports multiple design variants, sizing presets, and section borders.

Import

import { Card, CardHeader, CardBody, CardFooter } from '@moul-dev/ui';

Preview

import { Card, CardHeader, CardBody, CardFooter, Button } from '@moul-dev/ui';

export default function Example() {
  return (
    <Card className="w-80">
      <CardHeader>Card Title</CardHeader>
      <CardBody>
        This is the card body description content.
      </CardBody>
      <CardFooter className="flex justify-end gap-2">
        <Button variant="secondary">Cancel</Button>
        <Button variant="primary">Confirm</Button>
      </CardFooter>
    </Card>
  );
}

Variants

Cards support three distinct aesthetic styles to match your design requirements:

Default (Elevated)

Standard surface card featuring clean elevated shadows.

<Card variant="default" elevation={1}>
  <CardHeader>Elevated Card</CardHeader>
  <CardBody>Standard elevated container with shadow.</CardBody>
</Card>

Flat

Clean card with no shadow and a subtle background fill.

<Card variant="flat">
  <CardHeader>Flat Card</CardHeader>
  <CardBody>Flat container with subtle solid background.</CardBody>
</Card>

Glass

Premium translucent glassmorphic look using backdrop blur and opacity.

<Card variant="glass">
  <CardHeader>Glass Card</CardHeader>
  <CardBody>Translucent glass card with elegant backdrop filters.</CardBody>
</Card>

Divided Layout

By default, card headers, bodies, and footers flow continuously without separation lines. Passing the divided boolean prop adds subtle separator lines between sections.

<Card divided>
  <CardHeader>Divided Card</CardHeader>
  <CardBody>Borders separate the header, body, and footer sections.</CardBody>
  <CardFooter><Button size="sm">Action</Button></CardFooter>
</Card>

Sizes

Choose between different sizing presets to customize block and inline paddings:

Small (sm)

Compact spacing suitable for dense layouts or list grids.

<Card size="sm">...</Card>

Medium (md)

Balanced standard spacing (default).

<Card size="md">...</Card>

Large (lg)

Generous breathing spacing ideal for hero sections or details views.

<Card size="lg">...</Card>

API Reference

Card Props