Tegelweergave met cover-afbeelding

Aandachtspunten:

• Voeg class="tile" toe voor de Tegelweergave met cover-afbeelding op een enkel element. Voor meer informatie zie: tegelweergave
• Voeg de class image-cover toe voor de correcte weergave. Voor meer informatie zie: tegel met cover-afbeelding of groep met tegels met cover-afbeelding. Voor meer informatie over cover-afbeelding zie cover-afbeelding

Voorbeelden

Tegel met cover-afbeelding op enkel element

• Voeg de class image-cover toe.

Visueel voorbeeld:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

HTML-voorbeeld:

<div role="group" class="tile image-cover">
  <img src="/img/strand.jpg" alt="Foto van een strand">
  <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>

Groep tegels met cover-afbeeldingen

• Voeg de class images-cover toe aan het omliggende element. Geschikte onderliggende elementen zijn div en li binnen een ul.

Visueel voorbeeld:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

HTML-voorbeeld:

<div class="tiles images-cover column-4">
  <div role="group">
    <img src="/img/strand.jpg" alt="Foto van een strand">
    <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">
    <img src="/img/strand.jpg" alt="Foto van een strand">
    <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">
    <img src="/img/strand.jpg" alt="Foto van een strand">
    <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">
    <img src="/img/strand.jpg" alt="Foto van een strand">
    <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

• object-position

Bijbehorende bestanden

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

Benodigd

• tile/tile.scss
• image/image-cover.scss

Optioneel

• tile/tile-variables.scss
• image/image-cover-variables.scss
• Voor specieke uitzonderingen voor coverafbeeldingen op tegels: tile/tile-image-cover.scss
• tile/tile-image-cover-variables.scss