Card

A flexible content container with header, body, and footer regions.

Default

Card title

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

tsx

import { Button, Card } from "@hummingbirdui/react";

export default function CardDefault() {
  return (
    <Card className="max-w-sm">
      <Card.Header>
        <Card.Title>Card title</Card.Title>
        <Card.Subtitle className="mb-0">Subtitle</Card.Subtitle>
      </Card.Header>
      <Card.Body>
        <Card.Text className="mb-0">
          Some quick example text to build on the card title and make up the
          bulk of the card&apos;s content.
        </Card.Text>
      </Card.Body>
      <Card.Footer>
        <Button variant="text" size="sm">
          Learn more
        </Button>
      </Card.Footer>
    </Card>
  );
}

With an image

Card.Image places an image whose position controls which corners are rounded.

Good boy

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

tsx

import { Button, Card } from "@hummingbirdui/react";

export default function CardImage_() {
  return (
    <Card className="max-w-sm">
      <Card.Image
        position="top"
        src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
        alt="A dog"
      />
      <Card.Body>
        <Card.Title>Good boy</Card.Title>
        <Card.Text className="mb-0">
          Hummingbirds belong to the avian family Trochilidae, and their closest
          relatives are the equally fascinating swifts.
        </Card.Text>
      </Card.Body>
      <Card.Footer>
        <Button variant="text" size="sm">
          SHARE
        </Button>
        <Button variant="text" size="sm">
          LEARN MORE
        </Button>
      </Card.Footer>
    </Card>
  );
}

Image overlay

Card.ImageOverlay lays the Card.Body over the image.

Hummingbird

Hummingbirds are birds native to the Americas and comprise the biological family Trochilidae.

tsx

import { Button, Card } from "@hummingbirdui/react";

export default function CardImageOverlayExample() {
  return (
    <Card className="max-w-sm">
      <Card.ImageOverlay>
        <Card.Image
          position="full"
          src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
          alt="A dog"
        />
        <Card.Body>
          <Card.Title>Hummingbird</Card.Title>
          <Card.Text>
            Hummingbirds are birds native to the Americas and comprise the
            biological family Trochilidae.
          </Card.Text>
          <Button size="sm" className="rounded-full mt-auto">
            LEARN MORE
          </Button>
        </Card.Body>
      </Card.ImageOverlay>
    </Card>
  );
}

Horizontal

The aside prop lays the card out as a row.

Horizontal card

Image on the start, content alongside it.

tsx

import { Button, Card } from "@hummingbirdui/react";

export default function CardAside() {
  return (
    <Card aside className="max-w-lg max-sm:flex-col">
      <Card.Image
        src="https://images.unsplash.com/photo-1682540953146-e1e29f8b8bcd?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=300"
        alt="A dog"
        className="sm:w-2/5 sm:rounded-e-none sm:rounded-l-lg"
      />
      <Card.Body>
        <Card.Title>Horizontal card</Card.Title>
        <Card.Text>Image on the start, content alongside it.</Card.Text>
        <Button variant="subtle" size="sm">
          SHARE
        </Button>
      </Card.Body>
    </Card>
  );
}

Clickable

The action prop makes the whole card an interactive hover surface, paired with asChild to render as a link.

Hummingbird

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

tsx

import { Card } from "@hummingbirdui/react";

export default function CardImage_() {
  return (
    <Card asChild action className="max-w-sm">
      <a href="#">
        <Card.Image
          position="top"
          src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
          alt="A dog"
        />
        <Card.Body>
          <Card.Title>Hummingbird</Card.Title>
          <Card.Text className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </Card.Text>
        </Card.Body>
      </a>
    </Card>
  );
}

Card group

Card.Group joins cards into an attached row.

Good boy

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

Good boy

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

Good boy

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

tsx

import { Card, Button } from "@hummingbirdui/react";

export default function CardGroupExample() {
  return (
    <Card.Group>
      <Card className="max-w-sm">
        <Card.Image
          position="top"
          src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
          alt="A dog"
        />
        <Card.Body>
          <Card.Title>Good boy</Card.Title>
          <Card.Text className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </Card.Footer>
      </Card>
      <Card className="max-w-sm">
        <Card.Image
          position="top"
          src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
          alt="A dog"
        />
        <Card.Body>
          <Card.Title>Good boy</Card.Title>
          <Card.Text className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </Card.Footer>
      </Card>
      <Card className="max-w-sm">
        <Card.Image
          position="top"
          src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?w=600"
          alt="A dog"
        />
        <Card.Body>
          <Card.Title>Good boy</Card.Title>
          <Card.Text className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </Card.Footer>
      </Card>
    </Card.Group>
  );
}

API Reference

Card

Prop	Type	Default
`aside`	`boolean`	`false`
`action`	`boolean`	`false`
`asChild`	`boolean`	`false`
`className`	`string`	—

Card.Image

Prop	Type	Default
`position`	`"top" \| "bottom" \| "left" \| "right" \| "full"`	`"top"`
`className`	`string`	—

Styling

Hummingbird React card is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available card classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousCalendar NextCarousel