Cover-afbeelding testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Op div

HTML-voorbeeld:

<div class="image-cover">
<img src="/img/strand.jpg" alt="Foto van een strand">
</div>

Op section

HTML-voorbeeld:

<section class="image-cover">
<img src="/img/strand.jpg" alt="Foto van een strand">
</section>

Op een tegel

Dit voorbeeld maakt gebruik van Tegelweergave.

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>

Op een groep met tegels

Dit voorbeeld maakt gebruik van Tegelweergave.

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 image-covers column-3">
<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>