Karty, listy i sekcje treści

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• rozpoznać podstawowe części dobrej karty treści,
• wybrać właściwą semantykę dla kart, list i sekcji,
• zbudować responsywną siatkę kart bez sztywnych szerokości,
• projektować listy, które są czytelne i łatwe do skanowania,
• utrzymać spójny rytm odstępów w sekcji,
• unikać kart z chaotyczną hierarchią i zbyt dużą liczbą akcji.

Kontekst praktyczny

Karty pojawiają się w katalogach produktów, dashboardach, listach lekcji, panelach kursów, feedach i sekcjach marketingowych. Listy porządkują cechy, kroki, wyniki wyszukiwania i check-listy. Sekcja treści spina te elementy w większy blok z nagłówkiem, opisem i logicznym układem.

Anatomia karty

Dobra karta ma jasną strukturę: opcjonalną etykietę, tytuł, krótki opis, metadane i jedną główną akcję. W HTML najczęściej użyjesz <article>, jeżeli karta jest samodzielnym fragmentem treści.

Kopiuj<article class="content-card">
  <p class="content-card__meta">Moduł UI</p>
  <h3>Karty, listy i sekcje</h3>
  <p>Krótki opis, który wyjaśnia wartość elementu.</p>
  <a class="content-card__link" href="#">Zobacz szczegóły</a>
</article>

Nie każda karta musi być klikalna w całości. Jeżeli ma kilka akcji, zwykle lepiej zostawić konkretne linki lub przyciski niż robić z całego bloku jeden ogromny link.

Semantyczne listy

Lista powinna pozostać listą, nawet jeżeli wygląda jak zestaw badge'y albo checklist. <ul> nadaje się do zbioru równorzędnych elementów, a <ol> do kolejnych kroków.

Kopiuj<ul class="feature-list">
  <li>Jasny tytuł</li>
  <li>Krótki opis</li>
  <li>Jedna główna akcja</li>
</ul>

Możesz usunąć domyślne punktory, ale nie usuwaj semantyki. W CSS styluj odstępy, marker, ikonę albo tło elementu listy.

Sekcje treści

Sekcja treści to nie tylko tło i padding. Powinna mieć własny nagłówek, kontekst oraz jeden główny układ wewnętrzny: siatkę kart, listę wyników, media object albo panel z danymi.

Kopiuj<section class="content-section" aria-labelledby="resources-title">
  <div class="content-section__header">
    <h2 id="resources-title">Materiały do nauki</h2>
    <p>Wybierz kolejny blok i przejdź przez niego krok po kroku.</p>
  </div>
  <div class="content-grid">
    <article class="content-card">...</article>
  </div>
</section>

aria-labelledby wzmacnia relację między sekcją a jej nagłówkiem. To szczególnie przydatne, gdy strona ma wiele podobnych bloków treści.

Layout kart

Najbezpieczniejszy układ kart zaczyna się od jednej kolumny i rozszerza przez Grid. Dla powtarzalnych kart dobrze działa repeat(auto-fit, minmax()), bo dopasowuje liczbę kolumn do dostępnej szerokości.

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

Nie ustawiaj kartom sztywnej szerokości w pikselach, jeżeli mają działać responsywnie. Ustaw minimalny sensowny rozmiar i pozwól układowi oddychać.

Hierarchia i rytm

Karta powinna być łatwa do przeskanowania. Najpierw użytkownik widzi etykietę lub kategorię, potem tytuł, opis, metadane i akcję. Różnice rozmiaru, grubości i koloru powinny wspierać tę kolejność.

• Tytuł karty powinien być mocniejszy niż opis.
• Meta informacje powinny być spokojniejsze niż treść główna.
• Akcja powinna być łatwa do znalezienia, ale nie dominować nad tytułem.
• Odstępy między elementami powinny tworzyć rytm, nie przypadkowe przerwy.

Karta z mediami

Jeżeli karta zawiera obraz albo podgląd, zadbaj o stabilne proporcje. Ramka z aspect-ratio chroni layout przed przeskokami, a treść pod spodem pozostaje przewidywalna.

.content-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .75rem;
  background: #e0f2fe;
}

Media nie powinny być jedynym nośnikiem informacji. Tytuł i opis muszą wyjaśniać sens karty także wtedy, gdy obraz się nie załaduje.

Demo komponentów

Poniższe demo pokazuje sekcję z nagłówkiem, siatką kart, listą cech i jedną boczną listą kroków. To typowy wzorzec dla panelu kursu, dashboardu albo sekcji zasobów.

Najczęstsze błędy początkujących

• Budowanie każdej karty od zera zamiast jednego powtarzalnego komponentu.
• Używanie wielu akcji o tej samej wadze w jednej karcie.
• Sztywne szerokości kart, które powodują poziome overflow.
• Ukrywanie semantyki list przez zastępowanie <ul> przypadkowymi <div>.
• Zbyt mocne cienie i obramowania, które tworzą wizualny chaos.
• Brak spójnego rytmu między nagłówkiem sekcji, kartami i listami.

Mini zadanie

Zbuduj sekcję „Polecane materiały” z trzema kartami.

• Użyj <section> z aria-labelledby.
• Każdą kartę zbuduj jako <article>.
• Dodaj metadane, tytuł, opis i jeden link w każdej karcie.
• W jednej karcie dodaj listę trzech cech jako prawdziwe <ul>.
• Ustaw siatkę przez repeat(auto-fit, minmax(14rem, 1fr)) i sprawdź brak overflow na 390px.

Checklista

• Wiem, kiedy użyć <article>, <section>, <ul> i <ol>.
• Potrafię rozdzielić metadane, tytuł, opis i akcję w karcie.
• Używam jednej dominującej akcji w karcie.
• Buduję siatki kart bez sztywnych szerokości.
• Zachowuję semantykę list mimo niestandardowego wyglądu.
• Sprawdzam, czy karty, listy i sekcje nie tracą czytelności na mobile.

Podsumowanie lekcji

Karty, listy i sekcje treści są fundamentem komponentowego UI. Najważniejsze decyzje dotyczą semantyki, hierarchii, powtarzalnego layoutu i spójnego rytmu. Dobry komponent contentowy działa w siatce, na liście, na małym ekranie i w większej sekcji bez przepisywania zasad od nowa.

Kolejny krok roadmapy to nawigacje, breadcrumbsy i paginacja.