Nieuwe collectie HTML-sjabloon

Een kant-en-klare productsectie met vier kaarten voor statische HTML

Dit blok bevat al de essentiële visuele indeling voor een gedeelte met gerelateerde producten: een gecentreerde kop „Gerelateerde producten”, een scheidingslijn en vier herhaalde kaarten in een horizontale rij. Elke kaart bevat een afbeelding, een naamlabel en prijsinformatie, waardoor de sectie een harmonieus intern inhoudsritme heeft voor deze specifieke rol. De HTML-structuur ondersteunt tevens actieprijzen met oorspronkelijke prijzen, zodat de prijssectie naast de gereduceerde prijs ook de eerdere waarde kan tonen wanneer het omringende project die inhoud gebruikt.

Binnen een statische HTML-pagina kan dit blok als zelfstandige inhoudssectie onder een product- of categoriepresentatie worden geplaatst. De vierkante beeldverhouding zorgt ervoor dat de vier producten visueel vergelijkbaar blijven, terwijl de witte achtergrond en donkere typografie de rij makkelijk combineerbaar maken met andere paginasecties. De omringende pagina verzorgt nog steeds de navigatie, aanvullende inhoud en de bredere winkelervaring; deze sectie biedt puur de presentatie van de gerelateerde artikelen. Die gerichte opzet maakt hem bijzonder handig wanneer een statische pagina een kant-en-klare productcollectie vereist zonder de kaartstructuur opnieuw te hoeven opbouwen. De herhalende indeling geeft de pagina bovendien een duidelijke, begrensde inhoudseenheid die tussen andere statische secties kan worden geplaatst zonder zijn interne doel te verliezen.