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.

Upgrade to Pro

Unlock every component, including the ones still on the roadmap.

£9/month, cancel any time.

Usage

import { Card, CardHeader, CardTitle, CardContent } from "@kernelui/react";

<Card>
  <CardHeader>
    <CardTitle>Plan usage</CardTitle>
  </CardHeader>
  <CardContent>You've used 8 of 10 projects.</CardContent>
</Card>

Parts

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`	—