Card

Draft

Examples

OC/AC

Aktywna

Ubezpieczenie komunikacyjne dla jednego pojazdu.

Numer polisy: PL-2026-0001

Karta z nagłówkiem, treścią i stopką

import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@polisoteka-design/ui";

export function CardBasic() {
  return (
    <Card className="max-w-[20rem]">
      <CardHeader>
        <div className="flex items-center justify-between gap-inline-sm">
          <CardTitle>OC/AC</CardTitle>
          <Badge variant="success">Aktywna</Badge>
        </div>
        <CardDescription>Ubezpieczenie komunikacyjne dla jednego pojazdu.</CardDescription>
      </CardHeader>
      <CardContent>Numer polisy: PL-2026-0001</CardContent>
      <CardFooter>
        <Button size="sm" variant="secondary">
          Szczegóły
        </Button>
      </CardFooter>
    </Card>
  );
}

export default CardBasic;

Usage

Używaj Card, gdy grupujesz kilka powiązanych informacji jako jedną jednostkę w siatce lub liście (polisa, oferta, artykuł w kafelku) — kompozycja podkomponentów (CardHeader/CardTitle/CardDescription/CardContent/ CardFooter) daje spójny rytm pionowy bez ręcznego ustawiania odstępów.

Nie zagnieżdżaj Card w Card — jeśli potrzebujesz wizualnego rozróżnienia wewnątrz karty, użyj background.surface na div, nie kolejnej karty (dwa cienie/obramowania nakładające się na siebie łamią „dyscyplinę = premium”). Nie używaj Card jako ogólnego kontenera layoutu (sekcja strony, sidebar) — do tego służy zwykły div na tokenach spacingu.

Content

@todo(S-WYWIAD): wzorzec nazewnictwa CardTitle w różnych kontekstach (nazwa produktu vs. tytuł artykułu) — z wywiadu z Human.

API

Nazwa	Typ	Wymagany	Domyślnie	Opis
`Card.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLDivElement> — bez dodatkowych propsów ponad natywne.
`CardHeader.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLDivElement> — bez dodatkowych propsów ponad natywne.
`CardTitle.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLHeadingElement>.
`CardTitle.as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	nie	`"h3"`	Element nagłówka faktycznie wyrenderowany — dopasuj do hierarchii nagłówków strony, w której osadzasz kartę.
`CardDescription.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLParagraphElement> — bez dodatkowych propsów ponad natywne.
`CardContent.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLDivElement> — bez dodatkowych propsów ponad natywne.
`CardFooter.className`	`string`	nie	`undefined`	Rozszerza React.HTMLAttributes<HTMLDivElement> — bez dodatkowych propsów ponad natywne.

Dostępność

Zapewnione przez komponent:

CardTitle renderuje <h3> — świadomy wybór stałego poziomu (karta jest zwykle podsekcją strony).

Sprawdź przy użyciu:

Jeśli osadzasz kartę bezpośrednio po <h2> bez <h3> pomiędzy, hierarchia nagłówków jest poprawna. Jeśli kontekst wymaga innego poziomu (np. karta w sidebarze pod <h4>), CardTitle dziś NIE przyjmuje propsa as — zgłoś potrzebę zamiast nadpisywać tag przez className (nie da się nadpisać nazwy elementu klasą).
Walidator hierarchii nagłówków (validators/static/semantics.mjs) sprawdza to mechanicznie na stronach docs/dist.

Badge — status w CardHeader.
Button — akcja w CardFooter.