Card

Anatomia#

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/card.json

Użycie#

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

<Card>
  <CardHeader>
    <CardTitle>Storage</CardTitle>
    <CardDescription>36.2 GB of 50 GB used</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

Używaj pełnej kompozycji. Części korzystają ze wspólnej zmiennej odstępu, więc nagłówki, treść i stopki wyrównują się bez dodatkowych klas.

Przykłady#

Rozmiary#

default ma 24 px paddingu i 20 px odstępu między sekcjami. sm zmniejsza te wartości do 16 px i 12 px — na potrzeby pulpitów i gęstych siatek. Każda część czyta tę samą zmienną --card-spacing, więc nigdy nie musisz nadpisywać paddingu w poszczególnych sekcjach.

Z akcją#

CardAction umieszcza kontrolki w prawym górnym rogu nagłówka, a tytuł i opis trzyma wyrównane do lewej, niezależnie od ich długości.

Statystyka#

Karty to naturalne miejsce na kluczowe liczby. Etykieta powinna być mała i stonowana, wartość duża, a przy każdej zmianie podaj okres porównawczy.

Cennik#

Ustawienia#

Nagłówek z obramowaniem i zabarwiony pasek CardFooter tworzą ramę dla grupy ustawień. W stopce jest miejsce na akcję zatwierdzającą kartę — oddzieloną od kontrolek, których zmiany zapisuje.

Z obrazem#

Wstaw <img> jako pierwszy element potomny, a karta usunie górny padding i zaokrągli obraz zgodnie ze swoimi narożnikami. Dekoracyjne okładki dostają pusty alt.

PodglądKod

examples/card/image.tsx

KonferencjaHybrydowa

Systems & Craft 2026

Dwa dni o design systemach, tokenach i rzemiośle inżynierii interfejsów.

14–15 października 2026Kraków i online

Kup biletyProgram

Wytyczne#

Kiedy używać#

• Do grupowania treści i akcji dotyczących jednego tematu — projektu, planu, wskaźnika, sekcji ustawień.
• Do prezentowania w siatce kolekcji równorzędnych obiektów, które można szybko przejrzeć i porównać.

Kiedy nie używać#

• Do wizualnego oddzielenia pojedynczego bloku treści na stronie — użyj odstępów albo komponentu Separator.
• Do wierszy jednorodnych danych — użyj komponentu Table albo listy elementów Item.
• Do treści, która wymaga uwagi od razu — użyj komponentu Alert albo Dialog.

Jeden temat, jedna karta#

Akcje#

• Główną akcję karty umieść w CardFooter, wyrównaną do końca. Akcje drugorzędne idą przed nią.
• Akcje dotyczące samego obiektu — Edytuj, Udostępnij, menu z dodatkowymi opcjami — umieść w CardAction.
• Jeśli cała karta prowadzi do innej strony, zrób linkiem tytuł i rozciągnij jego obszar kliknięcia na całą kartę, zamiast umieszczać interaktywne elementy wewnątrz linku.

Elewacja#

Karty są na poziomie wyniesionym: w trybie jasnym to cienkie obramowanie i ledwie widoczny cień, w trybie ciemnym samo obramowanie. Nie dodawaj większych cieni, żeby karta się wyróżniała — o wyróżnieniu decydują treść i położenie, nie głębia. Cienie pływające należą do popoverów i okien dialogowych.

Dostępność#

• Nadaj nagłówek, gdy karta jest sekcją. CardTitle renderuje <div>, więc pasuje do każdej struktury dokumentu. Gdy karty są głównymi sekcjami strony, umieść w tytule nagłówek odpowiedniego poziomu — <CardTitle><h3>Storage</h3></CardTitle> — a przejmie on styl tytułu.
• Zachowaj logiczną kolejność czytania. CardAction jest wizualnie w rogu, ale w DOM występuje po tytule i opisie, więc czytnik ekranu najpierw poda, czego dotyczy karta, a dopiero potem, co można z nią zrobić.
• Media potrzebują alternatyw. Obrazy niosące informację potrzebują tekstu alt, a dekoracyjne — alt="" lub aria-hidden.

Dokumentacja API#

Card#

<div> z wyniesioną powierzchnią, obramowaniem i wspólnymi odstępami.

CardHeader#

Siatka, która rozmieszcza tytuł, opis i opcjonalny CardAction. Dodaj className="border-b", żeby oddzielić nagłówek od treści; jego dolny padding dopasuje się automatycznie.

CardTitle#

Tytuł karty, złożony stylem heading-sm (w małych kartach heading-xs).

CardDescription#

Tekst pomocniczy pod tytułem, w kolorze muted-foreground.

CardAction#

Kontrolki przypięte do prawego górnego rogu nagłówka, rozciągnięte na wysokość wierszy tytułu i opisu.

CardContent#

Główna treść z poziomym paddingiem dopasowanym do nagłówka.

CardFooter#

Zabarwiony pasek oddzielony obramowaniem — na akcje i status karty. Usuwa dolny padding karty, żeby tło sięgało krawędzi.