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.

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:

• Geef het element de tegelweergave mee door class="tile" mee te geven.
• De tegel gebruikt de volledig beschikbare breedte. Indien een smallere weergave gewenst is kan de tegel gecombineerd worden met de weergave in kolommen. Zie voor meer informatie Tegelweergave in kolommen.

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>
                
              

Tegelweergave in kolommen

De tegel gebruikt de volledig beschikbare breedte. Indien een smallere weergave gewenst is kan de tegel gecombineerd worden met de weergave in kolommen.

Aandachtspunten:

• Om de breedte van de tegel(s) aan te passen kan gebruik worden gemaakt van de kolommen. Voor meer informatie en de beschikbare weergaven zie: Contentweergave.
• Plaats het tegel-element binnen een div met de class van het gewenste contentweergave. Bijvoorbeeld <div class="column-3">.
• Tip Voor het plaatsen van meer tegels is het efficiënter om gebruik te maken van Groep met tegels.

Visueel voorbeeld:

Html-voorbeeld:

                
<div class="column-3">
  <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>
</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">
• Tip Om de breedte van de tegel(s) aan te passen kan gebruik worden gemaakt van de kolommen. Voor meer informatie en de beschikbare weergaven zie: Contentweergave. Het onderstaande voorbeeld maakt gebruik van de contentweergave column-3

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>
                
              

Tegel met afbeelding

Tegelweergave met een afbeelding

Aandachtspunten:

• De afbeelding kan zowel als content of als kop toegvoegd worden.
• Als de afbeelding het eerste element is binnen de tegel wordt deze visueel als kop weergegeven.

Visueel voorbeeld afbeelding als content:

Html-voorbeeld:

                
<div class="column-3 tiles">
  <div role="group">
    <h1>Lorem ipsum</h1>
    <img src="images/beach.jpg" alt="">
    <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>
                
              

Visueel voorbeeld afbeelding als kop:

Html-voorbeeld:

                
<div class="column-3 tiles">
  <div role="group">
    <img src="images/beach.jpg" alt="">
    <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>
                
              

Tegel met gegroepeerde content

Content groeperen binnen een element met tegelweergave

Aandachtspunten:

• Groepeer de content binnen een <div> binnen het tegelelement.
• Gegroepeerde knoppen kunnen toegevoegd worden binnen een tegelelement. Gebruik hiervoor <div class="button-container">. Voor meer informatie zie Knoppen groeperen.
• Voor het horizontaal weergeven van de gegroepeerde content voeg class="horizontal-view" toe. Op de <div> van de gegroepeerde content.

Beschikbare voorbeelden:

Gegroepeerde content

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>
      <h1>Gegroepeerde content</h1>
      <p>Lorem ipsum dolor set amet</p>
    </div>
  </div>
</div>
                
              

Gegroepeerde knoppen

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 class="button-container">
        <button class="ghost">Lorem</button>
        <button>Ipsum</button>
    </div>
  </div>
</div>
                
              

Gegroepeerde content horizontale weergave

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 class="horizontal-view">
      <a href="">Lorem ipsum</a>
      <a href="">Dolor set</a>
    </div>
  </div>
</div>
                
              

Gegroepeerde content tegel-acties

Aandachtspunten:

• Actieknoppen kunnen aan het eind van de tegel uitgelijnd worden. Zodat alle actieknoppen op dezelfde hoogte geplaatst worden. Voeg de class tile-actions toe aan de gegroepeerde content binnen de tegel.

Visueel voorbeeld:

Html-voorbeeld:

                
<div class="tiles column-3">
  <div role="group">
    <img src="images/beach.jpg" alt="">
    <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 class="tile-actions horizontal-view">
      <a href="">Lorem</a>
      <button>Dolor set</button>
    </div>
  </div>

  <div role="group">
    <img src="images/beach.jpg" alt="">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="tile-actions horizontal-view">
      <a href="">Lorem</a>
      <button>Dolor set</button>
    </div>
  </div>

  <div role="group">
    <img src="images/beach.jpg" alt="">
    <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>
    <p>Ut et dui sapien.</p>
    <div class="tile-actions horizontal-view">
      <a href="">Lorem</a>
      <button>Dolor set</button>
    </div>
  </div>
</div>