Ny kollektion HTML-mall

En färdig produktsektion med fyra kort för statisk HTML

Blocket täcker redan den grundläggande visuella strukturen för en sektion med relaterade produkter: en centrerad rubrik med texten ”Relaterade produkter”, en avdelare och fyra återkommande kort i en horisontell rad. Varje kort innehåller bild, namnetikett och prisinformation, vilket ger sektionen en komplett intern innehållsrytm för just detta ändamål. HTML-strukturen har även stöd för kampanjpriser med ordinarie priser, så att prisområdet kan förmedla ett sänkt pris vid sidan av det tidigare värdet när det omgivande projektet använder det innehållet.

På en statisk HTML-sida kan detta block placeras under en produkt- eller kategoripresentation som en helt fristående innehållssektion. Den kvadratiska bildbeskärningen gör de fyra produkterna lätta att jämföra visuellt, medan den vita bakgrunden och mörka typografin gör raden enkel att placera intill andra sidosektioner. Den överordnade sidan står fortfarande för navigering, övrigt innehåll och den övergripande shoppingupplevelsen; denna sektion bidrar uteslutande med presentationen av sina relaterade produkter. Detta fokuserade omfång gör sektionen mycket användbar när en statisk sida behöver en färdig produktkollektion utan att kortstrukturen behöver byggas upp från grunden. Den repetitiva layouten ger dessutom den omgivande sidan en tydlig, avgränsad innehållsenhet som kan placeras mellan andra statiska sektioner utan att dess interna syfte förändras.