Card

Displays a card with header, content, and footer.

Code

import {
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Card className="tw:w-full tw:max-w-sm">
      <CardHeader>
        <CardTitle>Login to your account</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
        <CardAction>
          <Button variant="link">Sign Up</Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <form>
          <div className="tw:flex tw:flex-col tw:gap-6">
            <div className="tw:grid tw:gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="m@example.com"
                required
              />
            </div>
            <div className="tw:grid tw:gap-2">
              <div className="tw:flex tw:items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  href="#"
                  className="tw:ml-auto tw:inline-block tw:text-sm tw:underline-offset-4 tw:hover:underline"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" type="password" required />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="tw:flex-col tw:gap-2">
        <Button type="submit" className="tw:w-full">
          Login
        </Button>
        <Button variant="outline" className="tw:w-full">
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  );
}

Composition

Use the following composition to build a Card:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Size

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Code

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  ChevronRightIcon,
} from "@falcon/ui-kit";

export function Example() {
  const featureName = "Scheduled reports";

  return (
    <Card size="sm" className="tw:mx-auto tw:w-full tw:max-w-xs">
      <CardHeader>
        <CardTitle>{featureName}</CardTitle>
        <CardDescription>
          Weekly snapshots. No more manual exports.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="tw:grid tw:gap-2 tw:py-2 tw:text-sm">
          <li className="tw:flex tw:gap-2">
            <ChevronRightIcon className="tw:mt-0.5 tw:size-4 tw:shrink-0 tw:text-muted-foreground" />
            <span>Choose a schedule (daily, or weekly).</span>
          </li>
          <li className="tw:flex tw:gap-2">
            <ChevronRightIcon className="tw:mt-0.5 tw:size-4 tw:shrink-0 tw:text-muted-foreground" />
            <span>Send to teammates or grower accounts.</span>
          </li>
          <li className="tw:flex tw:gap-2">
            <ChevronRightIcon className="tw:mt-0.5 tw:size-4 tw:shrink-0 tw:text-muted-foreground" />
            <span>Include charts, tables, and key metrics.</span>
          </li>
        </ul>
      </CardContent>
      <CardFooter className="tw:flex-col tw:gap-2">
        <Button size="sm" className="tw:w-full">
          Set up scheduled reports
        </Button>
        <Button variant="outline" size="sm" className="tw:w-full">
          See what&apos;s new
        </Button>
      </CardFooter>
    </Card>
  );
}

Image

Add an image before the card header to create a card with an image.

Code

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Card className="tw:relative tw:mx-auto tw:w-full tw:max-w-sm tw:pt-0">
      <div className="tw:absolute tw:inset-0 tw:z-30 tw:aspect-video tw:bg-black/35" />
      <img
        src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?auto=format&fit=crop&w=720&q=80"
        alt="Event cover"
        className="tw:relative tw:z-20 tw:aspect-video tw:w-full tw:object-cover tw:brightness-60 tw:grayscale"
      />
      <CardHeader>
        <CardAction>
          <Badge variant="secondary">Featured</Badge>
        </CardAction>
        <CardTitle>Grower field day</CardTitle>
        <CardDescription>
          A hands-on look at trial plots, agronomy insights, and new products.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button className="tw:w-full">View Event</Button>
      </CardFooter>
    </Card>
  );
}

API

Card

Groups related content and actions for one subject. Renders a <div> element and accepts standard <div> props.

Props

size

size?: "sm" | "default" = "default"

Controls the card’s spacing.

CardAction

Contains a card-level action such as a button or menu. Renders a <div> element, accepts standard <div> props, and must be a direct child of CardHeader.

CardContent

Contains the card’s primary content. Renders a <div> element and accepts standard <div> props.

CardDescription

Provides supporting text for the card. Renders a <div> element and accepts standard <div> props.

CardFooter

Contains card actions or supporting content. Renders a <div> element and accepts standard <div> props.

CardHeader

Groups a card’s title, description, and action. Renders a <div> element and accepts standard <div> props.

CardTitle

Provides the card’s title. Renders a <div> element and accepts standard <div> props.