Card

Techniczny: DraftAkceptacja: Draft

Materiał odziedziczony z PoC. Działający przykład pokazuje stan kodu, nie zatwierdzenie nowej identyfikacji. Rozstrzygnięcia warsztatów mają pierwszeństwo.

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.page 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

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 domyślnie <h3> (karta jest zwykle podsekcją strony). Poziom zmienia prop as (h1–h6).

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>), ustaw as na właściwy poziom. Nazwy elementu nie zmienisz klasą — className zmienia tylko wygląd.
Walidator hierarchii nagłówków (validators/src/semantics.ts) sprawdza to mechanicznie na stronach docs/dist.

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

Brief do wykonania

@todo(card): wykonać poniższy brief, przedstawić rezultat i dowody odbioru. Usunięcie znacznika nie jest wykonaniem zadania.

Zakres: Granice kompozycji, nagłówki i akcje; zastosowanie jako oferta nie może ukrywać ograniczeń ani zamieniać całej karty w niedostępny link.
Konwencja: najpierw reguła lub gotowe zastosowanie, potem przykład i kontrprzykład, następnie granice oraz sposób sprawdzenia. Nie zastępuj materiału opisem planu jego przygotowania.
Źródła: platforma marki; zaakceptowane decyzje warsztatów. Zastane demo lub deklaracja PoC nie zatwierdzają nowej reguły.
Powiązania: Tokeny i zależności.
Granica swobody: możesz redagować i pokazywać istniejące ustalenia. Nową obietnicę, wybór wizualny, dane firmy i twierdzenie produktowe przedstaw do decyzji; nie uzupełniaj z pamięci.

Weryfikacja

Sprawdź rzeczywisty render i użycie wspólnego kodu, desktop/mobile, jasny/ciemny tryb oraz właściwe konteksty portali. Bramka techniczna: pnpm design:check; przed wydaniem także pnpm design:audit. Sam opis ani zielony test innego demo nie jest dowodem odbioru tego elementu.