Kafelki(ang. Tiles)

Kafelki pozwalają na przedstawienie dłuższej listy elementów w atrakcyjny wizualnie sposób. Szczególnie dobrze sprawdzają się na stronach z komunikatami prasowymi czy blogach. Mogą występować razem ze stronicowaniem.

Struktura

Zdjęcie zależnie od wariantu
Zdjęcie ilustruje tekst. Nie może zawierać w sobie tekstu. W niektórych wariantach może występować jako tło całego komponentu. W wersji małej komponent może występować bez zdjęcia.
Kategoria
Opisuje kategorię stron, do której należy podstrona (np. artykuł) reprezentowana przez kafelek. Rekomendowany limit słów to 2.
Data
Informuje o dacie dodania materiału.
Tytuł
Rekomendowany limit tekstu to 3-4 linijki na wszystkich rozdzielczościach.
Lead
Stanowi rozwinięcie tytułu. Rekomendowana długość tekstu to 2-5 linijek na wszystkich rozdzielczościach.
Link ze strzałką
Odsyła użytkownika na inną podstronę. W zależności od tła jest to link biały lub czerwony (dla poziomu dostępności AA minimalny wymagany kontrast to 4.5:1). Towarzyszy mu zawsze strzałka.

Klikalny jest cały kafelek.

Warianty

Kafelek duży
Zajmuje zawsze 8 kolumn na desktopie. Zdjęcie może stanowić tło lub zajmować tylko część komponentu.
Kafelek mały
Zajmuje zawsze 4 kolumny na desktopie. Zdjęcie może stanowić tło, zajmować tylko część komponentu, lub może w ogóle nie występować. Pozostałe elementy znajdują się w górnej lub środkowej części komponentu z wyjątkiem linku, który zawsze jest umieszczony na dole.

Grupy

Kafelki występują w grupach. Dlatego bardzo istotne jest zachowanie zasad tworzenia układu strony. Rekomendowana minimalna liczba kafelków to 3.

Należy tak dobrać różne warianty kafelków, aby tworzyły one harmonijny, ale i ciekawy układ. Warto rozważyć wyróżnienie pierwszego kafelka większym rozmiarem. Można również dodać kafelek ze zdjęciem w tle, lub kafelek bez zdjęcia aby urozmaicić grupę.

Zasady stosowania

Duży kafelek umieszczony pierwszy

W przypadku grup kafelków, w których jeden jest większy, powinien on być umieszczony na początku.

Przyciemnianie zdjęcia

Jeśli zdjęcie stanowi tło, jest ono przyciemniane w miejscu nakładania się tekstu za pomocą półprzezroczystego filtru. Filtr może zostać wyłączony, jeśli kontrast tekst-tło oraz link-tło jest odpowiedni (4.5:1 dla fontu poniżej 24px bez pogrubienia lub poniżej 18.5px z pogrubieniem; 3:1 dla większych fontów).