Skip to content
Layout

Card

Groups related content and actions.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@flinbu/seed";

Header, content and footer

Tokens

435 tokens in Light and Dark.

4 text colors fail contrast in Light since the last sync.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from "@flinbu/seed";
import { Palette } from "lucide-react";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Tokens</CardTitle>
    <CardDescription>435 tokens in Light and Dark.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="m-0 body-body-3-regular text-secondary">4 text colors fail contrast in Light since the last sync.</p>
  </CardContent>
  <CardFooter>
    <Button variant="secondary" size="sm">Later</Button>
    <Button size="sm" leftIcon={<Palette />}>Open tokens</Button>
  </CardFooter>
</Card>

Use it for

  • A self-contained summary: a system, a plan, a change request.

Use something else for

  • Cards inside cards.

Props

PropTypeDefaultDescription
interactivebooleannoneHover elevation and pointer cursor.
CardTitle: as'h2' | 'h3' | 'h4''h3'Heading level.
classNamestringnoneExtra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

  • interactive only changes the look: put a real link or button inside.