Card

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

Default

Default Card

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,
  CardBody,
  CardFooter,
  CardHeader,
  CardText,
  CardTitle,
  CardSubtitle,
} from "@hummingbirdui/react";

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

With an image

CardImage 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,
  CardBody,
  CardFooter,
  CardImage,
  CardText,
  CardTitle,
} from "@hummingbirdui/react";

export default function CardImage_() {
  return (
    <Card className="max-w-sm">
      <CardImage
        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"
      />
      <CardBody>
        <CardTitle>Good boy</CardTitle>
        <CardText className="mb-0">
          Hummingbirds belong to the avian family Trochilidae, and their closest
          relatives are the equally fascinating swifts.
        </CardText>
      </CardBody>
      <CardFooter>
        <Button variant="text" size="sm">
          SHARE
        </Button>
        <Button variant="text" size="sm">
          LEARN MORE
        </Button>
      </CardFooter>
    </Card>
  );
}

Image overlay

CardImageOverlay lays the CardBody over the image.

Hummingbird

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

tsx

import {
  Button,
  Card,
  CardBody,
  CardImage,
  CardImageOverlay,
  CardText,
  CardTitle,
} from "@hummingbirdui/react";

export default function CardImageOverlayExample() {
  return (
    <Card className="max-w-sm">
      <CardImageOverlay>
        <CardImage
          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"
        />
        <CardBody>
          <CardTitle>Hummingbird</CardTitle>
          <CardText>
            Hummingbirds are birds native to the Americas and comprise the
            biological family Trochilidae.
          </CardText>
          <Button size="sm" className="rounded-full mt-auto">
            LEARN MORE
          </Button>
        </CardBody>
      </CardImageOverlay>
    </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,
  CardBody,
  CardImage,
  CardText,
  CardTitle,
} from "@hummingbirdui/react";

export default function CardAside() {
  return (
    <Card aside className="max-w-lg max-sm:flex-col">
      <CardImage
        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"
      />
      <CardBody>
        <CardTitle>Horizontal card</CardTitle>
        <CardText>Image on the start, content alongside it.</CardText>
        <Button variant="subtle" size="sm">
          SHARE
        </Button>
      </CardBody>
    </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,
  CardBody,
  CardImage,
  CardText,
  CardTitle,
} from "@hummingbirdui/react";

export default function CardImage_() {
  return (
    <Card asChild action className="max-w-sm">
      <a href="#">
        <CardImage
          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"
        />
        <CardBody>
          <CardTitle>Hummingbird</CardTitle>
          <CardText className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </CardText>
        </CardBody>
      </a>
    </Card>
  );
}

Card group

CardGroup 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,
  CardBody,
  CardGroup,
  CardText,
  CardTitle,
  CardImage,
  CardFooter,
  Button,
} from "@hummingbirdui/react";

export default function CardGroupExample() {
  return (
    <CardGroup>
      <Card className="max-w-sm">
        <CardImage
          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"
        />
        <CardBody>
          <CardTitle>Good boy</CardTitle>
          <CardText className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </CardText>
        </CardBody>
        <CardFooter>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </CardFooter>
      </Card>
      <Card className="max-w-sm">
        <CardImage
          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"
        />
        <CardBody>
          <CardTitle>Good boy</CardTitle>
          <CardText className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </CardText>
        </CardBody>
        <CardFooter>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </CardFooter>
      </Card>
      <Card className="max-w-sm">
        <CardImage
          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"
        />
        <CardBody>
          <CardTitle>Good boy</CardTitle>
          <CardText className="mb-0">
            Hummingbirds belong to the avian family Trochilidae, and their
            closest relatives are the equally fascinating swifts.
          </CardText>
        </CardBody>
        <CardFooter>
          <Button variant="text" size="sm">
            SHARE
          </Button>
          <Button variant="text" size="sm">
            LEARN MORE
          </Button>
        </CardFooter>
      </Card>
    </CardGroup>
  );
}

API Reference

Card

Prop	Type	Default	Description
aside	`boolean`	`false`	Lay the card out horizontally.
action	`boolean`	`false`	Make the whole card an interactive hover surface.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

CardImage

Prop	Type	Default	Description
position	`"top" \| "bottom" \| "left" \| "right" \| "full"`	`"top"`	Which corners of the image are rounded.
className	`string`	—	Additional classes merged with the generated classes.

CardHeader, CardBody, CardFooter, CardTitle, CardSubtitle, CardText, CardImageOverlay, and CardGroup are layout wrappers. Each accepts asChild and className.

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.

PreviousButton NextClose Button