Menu włoskiej pizzy Szablon HTML

Gotowa sekcja statyczna prezentująca trzy propozycje pizzy

Blok łączy najważniejsze elementy karty dań w jeden spójny układ: zdjęcie potrawy na pełną szerokość wprowadza odbiorcę, wyśrodkowany nagłówek „Włoskie menu pizzy” określa charakter sekcji, a trzy karty produktów prezentują dostępne warianty. Pizza serowa, Pizza pepperoni i Pizza wegetariańska mają własne zdjęcie, tytuł oraz opis. W opisach Pizzy serowej i Pizzy pepperoni uwzględniono wybór sosu i ciasta, natomiast w opisie Pizzy wegetariańskiej wymieniono sos pomidorowy, mozzarellę, zieloną paprykę, cebulę, świeże pieczarki, pomidory oraz czarne oliwki.

Zastosowana na statycznej stronie HTML sekcja ta skutecznie eksponuje ofertę pizzerii, podczas gdy pozostała część strony zapewnia nawigację, inne dane restauracji oraz ogólną strukturę serwisu. Białe karty ułożono w jednym trzykolumnowym rzędzie na czarnym tle, dzięki czemu pozycje menu są estetycznie pogrupowane i nie tworzą monotonnej listy. Duże zdjęcie powyżej rzędu kart stanowi mocny akcent wizualny, a wyśrodkowany wiersz z informacją o prawach autorskich oddziela źródło zdjęć od opisów dań.

W efekcie otrzymujemy przygotowany moduł zawartości, a nie kompletną witrynę statyczną. Zastosowana hierarchia doskonale sprawdza się wtedy, gdy strona wymaga karty dań lub prezentacji produktów opartej na powtarzalnych kartach ze zdjęciem i tekstem. Przed tym blokiem lub za nim można swobodnie umieszczać kolejne sekcje, podczas gdy on sam zachowuje własne fotografie kulinarne, nazwy produktów, opisy i wyrazisty kontrast.