AeontelAeontel Docs

Card

Card surface with header / content / footer slots.

Usage

TSX
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@aeontel/ui";

<Card>
  <CardHeader>
    <CardTitle>Billing</CardTitle>
    <CardDescription>Manage your plan and invoices.</CardDescription>
  </CardHeader>
  <CardContent>Body content here.</CardContent>
  <CardFooter>
    <Button>Upgrade</Button>
  </CardFooter>
</Card>;

Exports

Card

Card surface container.

TypeScript
Card(props: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>): JSX.Element

Props

PropTypeDefaultDescription
variant?"outline" | "solid" | null | undefined"solid"
size?"default" | "sm" | null | undefined"default"

CardHeader

Top section of a card (title + description + action).

TypeScript
CardHeader(props: React.ComponentProps<"div">): JSX.Element

CardTitle

Card title text.

TypeScript
CardTitle(props: React.ComponentProps<"div">): JSX.Element

CardDescription

Subtle description line under the card title.

TypeScript
CardDescription(props: React.ComponentProps<"div">): JSX.Element

CardAction

Action slot (usually a button) aligned to the card header.

TypeScript
CardAction(props: React.ComponentProps<"div">): JSX.Element

CardContent

Main body of the card.

TypeScript
CardContent(props: React.ComponentProps<"div">): JSX.Element

CardFooter

Footer section of the card, typically with action buttons.

TypeScript
CardFooter(props: React.ComponentProps<"div">): JSX.Element