Tre stycken HTML-mall

Tre numrerade kort bildar en färdig statisk sektion

Rubriken och kortstapeln skapar redan ett fokuserat innehållsområde för en statisk HTML-sida. ”Vi designar digitala produkter och varumärken” introducerar ämnet, och de tre rundade vita korten presenterar de understödjande numrerade punkterna därunder. Eftersom varje kort har samma grundläggande uppbyggnad – ett runt märke bredvid ett textstycke – kan sektionen presentera en sekvens utan att kräva ytterligare strukturella lösningar kring de enskilda delarna.

Den klarorange bakgrunden ger sektionen en tydlig avgränsning på sidan. De vita kortytorna bildar lättlästa fält mot bakgrunden, medan de lila märkena 01, 02 och 03 gör ordningen tydlig innan besökarna börjar läsa texten. Enkolumnslayouten ger dessutom sektionen ett naturligt vertikalt flöde: rubriken först, följt av den första, andra och tredje punkten. Detta gör blocket mycket lämpligt för att beskriva viktiga fördelar eller ge en processöversikt mellan andra statiska sektioner.

I en HTML-mall bör blocket ses som en komplett sektion i en större HTML-sida eller webbplats. Den omgivande strukturen kan hantera navigering, kompletterande innehåll och andra sidytor, medan det här blocket bidrar med sin egen rubrik, sina upprepade element, färgkontraster och sin avståndslogik. Dess statiska interaktionsmodell håller innehållet synligt hela tiden utan att förlita sig på flikar, reglage eller utfällbara paneler. Det färdiga upplägget kan därför återanvändas när en sida behöver en kompakt och visuellt avgränsad sekvens med tre informationspunkter.