Card

Defaults to a plain <div>, a card is usually just a visual grouping. Set as="article" when the content is genuinely self-contained and could be syndicated on its own (a blog post preview, a product card), that's what <article>actually means. This is the one component in Kernel without a single obvious native anchor.

Create an account

Start your free 7-day trial. No credit card required.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Create an account

Start your free 7-day trial. No credit card required.

Unstyled

Same component — Kernel look stripped. See Platforms.

title

title level

description

Usage

<Card>
  <CardHeader>
    <Avatar src="https://api.dicebear.com/9.x/avataaars/svg?seed=Kernel" alt="" fallback="🙂" />
    <CardTitle>Create an account</CardTitle>
    <CardDescription>Start your free 7-day trial. No credit card required.</CardDescription>
  </CardHeader>
  <CardContent>
    <Button variant="primary">Get started</Button>
    <Separator />
    <Button variant="secondary">Continue with email</Button>
  </CardContent>
</Card>

<kernel-card>
  <kernel-card-header>
    <kernel-avatar src="https://api.dicebear.com/9.x/avataaars/svg?seed=Kernel" alt="" fallback="🙂"></kernel-avatar>
    <kernel-card-title>Create an account</kernel-card-title>
    <kernel-card-description>Start your free 7-day trial. No credit card required.</kernel-card-description>
  </kernel-card-header>
  <kernel-card-content>
    <kernel-button variant="primary">Get started</kernel-button>
    <kernel-separator></kernel-separator>
    <kernel-button variant="secondary">Continue with email</kernel-button>
  </kernel-card-content>
</kernel-card>

Parts

Props for Card.
Component	Notes
`Card`	`as`: "div" \| "article" \| "section", defaults to "div"
`CardHeader`	—
`CardTitle`	`level`: 2–6, defaults to 3 (an `<h3>`)
`CardDescription`	Renders a `<p>`
`CardContent`	—
`CardFooter`	—