Card

Displays a card with header, content, and footer.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/card

Lineage

Shadcn

Docs

Spoke

Anatomy

import {
	Card,
	CardHeader,
	CardTitle,
	CardDescription,
	CardAction,
	CardContent,
	CardFooter,
} from "@/components/ui/card"

export default () => (
	<Card>
		<CardHeader>
			<CardTitle />
			<CardDescription />
			<CardAction />
		</CardHeader>
		<CardContent />
		<CardFooter />
	</Card>
)

Spoke utility classes

Class	Fallback chain	Description
`--card-border`	`var(--border)`	Border colour for card
`--card-radius`	`var(--radius-lg)`	Border radius for card
`--shadow-card`	`var(--shadow-sm)`	Box shadow for card