Display

Card

Server Component

Surface that groups related content.

Import

tsx

import { Card } from "@cronus-ui/ui";

bash

npx cronus-ui add card

Examples

Anatomy

A composable container with header, action, content, and footer slots.

Pro plan

Everything you need to ship a polished product.

Popular

$24/ month

tsx

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Everything you need to ship a polished product.</CardDescription>
    <CardAction>
      <Badge variant="primary">Popular</Badge>
    </CardAction>
  </CardHeader>
  <CardContent className="flex items-baseline gap-1">
    <span className="font-display text-3xl font-semibold text-fg">$24</span>
    <span className="text-sm text-fg-tertiary">/ month</span>
  </CardContent>
  <CardFooter>
    <Button variant="primary" className="w-full">
      Upgrade now
    </Button>
  </CardFooter>
</Card>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CardDefault layout:inline style:card {
  description:"Monthly plan"
  label "Subscription"
}

page "/audit/card/default" type:custom {
  use CardDefault
}