Proste kroki Szablon HTML

Cztery ponumerowane karty tworzą gotową sekcję statyczną

Nagłówek i towarzyszący mu akapit określają cel sekcji, zanim cztery karty zaprezentują samą sekwencję. Karty są ułożone w jednym rzędzie i ponumerowane od 1 do 4, dzięki czemu treść ma już wyraźny układ sekwencyjny i nie wymaga osobnej listy do wyjaśnienia kolejności. Ich tytuły – „Pij wodę”, „Stosuj maseczki do twarzy”, „Stosuj błyszczyk do twarzy” i „Wprowadź kwas glikolowy” – nadają sekcji konkretny charakter pielęgnacyjny, a krótkie opisy zapewniają miejsce na dodatkowe wskazówki.

Każda powtarzająca się karta zawiera przycisk „więcej”, dzięki czemu statyczna sekcja może kierować do kolejnego kroku lub dodatkowych informacji, jeśli strona nadrzędna zapewnia odpowiednie działanie linków. Przycisków nie należy traktować jako pełnego systemu nawigacji – stanowią one punkty akcji w obrębie tego jednego obszaru treści. Wyśrodkowane wprowadzenie, czterokolumnowy rząd i jednolita stylistyka kart sprawiają, że blok jest wystarczająco uporządkowany, by wykorzystać go jako sekcję usług, porad lub instrukcji na statycznej stronie HTML.

Ciemne abstrakcyjne tło, kolorowe, zaokrąglone kształty z gradientem, białe karty i cyjanowe akcenty nadają sekcji dopracowaną kompozycję wizualną zamiast surowej listy treści. W kontekście statycznego kodu HTML otaczające sekcje strony mogą zapewniać szerszą nawigację i dodatkową treść, podczas gdy ten blok zachowuje własną sekwencję, relacje stylistyczne i rolę instruktażową.