Cards zijn containers voor korte stukken informatie die met elkaar te maken hebben. Qua grootte en vorm lijken ze op speelkaarten. Ze hebben de volgende eigenschappen:
Cards passen beter in een situatie waarbij gebruikers browsen voor informatie dan wanneer ze een zoekveld gebruiken. Gebruik ze in de volgende situaties:
Onder de volgende omstandigheden is het beter om geen cards te gebruiken:
Let op de volgende dingen als u cards gebruikt:
sr-only
tekstalternatief βtoon informatie over [titel cards]β. Zo voegt u de titel aan het tekstalternatief toe. Screenreadergebruikers snappen zo welke card bij het knopje hoort. Dat voorkomt misverstanden.<ul class="dso-card-list">
<li>
<div class="dso-card">
<div class="dso-card-heading">
<a href="#">
<h2>
<span>Omgevingsplan Nieuwegein</span>
<dso-icon icon="chevron-right"></dso-icon>
</h2>
</a>
</div>
<div class="dso-card-content">
<div class="dso-rich-content">
<p>Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</li>
<li>
<div class="dso-card">
<div class="dso-card-heading">
<a href="#">
<h2>
<span>Brouwersmolen</span>
<dso-icon icon="chevron-right"></dso-icon>
</h2>
</a>
<div class="dso-card-interactions">
<div class="dso-card-interaction">
<button type="button" class="dso-tertiary"><span class="sr-only">Toon informatie over Brouwersmolen</span>
<dso-icon icon="info"></dso-icon>
</button>
</div>
</div>
</div>
<div class="dso-card-content">
<div class="dso-rich-content">
<p>Brouwersmolen eget iaculis nisi quam in libero.</p>
</div>
</div>
</div>
</li>
<li>
<div class="dso-card">
<div class="dso-card-heading">
<a href="#">
<h2>
<span>Brouwersmolen</span>
<dso-icon icon="chevron-right"></dso-icon>
</h2>
</a>
<div class="dso-card-interactions">
<div class="dso-card-interaction">
<button type="button" class="dso-tertiary"><span class="sr-only">Toon informatie over Brouwersmolen</span>
<dso-icon icon="info"></dso-icon>
</button>
</div>
</div>
</div>
<div class="dso-card-content">
<div class="dso-rich-content">
<p>Brouwersmolen eget iaculis nisi quam in libero.</p>
</div>
</div>
</div>
</li>
</ul>
<ul class="dso-card-list">
{% for card in cards %}
<li>
{% render '@card', card %}
</li>
{% endfor %}
</ul>
cards:
- label: Omgevingsplan Nieuwegein
content: >-
Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing
elit.
- label: Brouwersmolen
content: Brouwersmolen eget iaculis nisi quam in libero.
interactions:
- button:
type: button
modifier: dso-tertiary
icon: info
label: Toon informatie over Brouwersmolen
iconOnly: true
- label: Brouwersmolen
content: Brouwersmolen eget iaculis nisi quam in libero.
interactions:
- button:
type: button
modifier: dso-tertiary
icon: info
label: Toon informatie over Brouwersmolen
iconOnly: true