Tegelweergave

Tegelweergave kan gebruikt worden om content visueel te groeperen om gebruikers te laten zien welke content bij elkaar hoort. Veel gebruikte toepassingen voor tegelweergave zijn bijvoorbeeld nieuwsberichten.

Voorbeelden:

Beschikbare voorbeelden:

Tegelweergave op enkel element

Geschikt voor het weergeven van een element dat visueel gegroepeerd dient te zijn of visueel meer aandacht mag krijgen om de gebruiker te attenderen.

Aandachtspunten:

• Voeg class="tile" toe voor de tegelweergave op een enkel element.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="tile" role="group">
  <h1>Lorem ipsum dolor set</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
</div>

Groep met tegels

Voor het efficiënt weergeven van een groep elementen met een tegelweergave.

Aandachtspunten:

• Groepeer de elementen die met de tegelweergave weergegeven dienen te worden binnen een div of ul en geef deze div of ul de benodigde class mee. Bijvoorbeeld: <div class="tiles">

Visueel voorbeeld:

HTML-voorbeeld:

<div class="tiles column-3">
  <div role="group">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
  </div>

  <div role="group">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
  </div>

  <div role="group">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
  </div>
</div>

Instelbare variabelen

• Tegel
  • border-width
  • border-style
  • border-color
  • flex-direction
  • gap
  • padding
• Titel
  • text-color
  • font-size
• Subtitel
  • text-color
  • font-size

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/tile";

Gerelateerde pagina's