Het dso-card
component mag alleen in het dso-cards
worden gebruikt.
<!-- Default -->
<div class="dso-card">
<a href="#">
<div class="dso-rich-content">
<h2>Omgevingsplan Nieuwegein</h2>
<p>Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
<!-- Aside -->
<div class="dso-card">
<a href="#">
<div class="dso-rich-content">
<h2>Brouwersmolen</h2>
<p>Brouwersmolen eget iaculis nisi quam in libero.</p>
</div>
</a>
<div class="dso-card-interactions">
<div class="dso-card-interaction">
<button type="button" class="btn btn-link"><span class="sr-only">Toon informatie over Brouwersmolen</span><svg class="di di-info">
<use href="../../dso-icons.svg#info" />
</svg></button>
</div>
</div>
</div>
<!-- Below -->
<div class="dso-card">
<a href="#">
<div class="dso-rich-content">
<h2>Brouwersmolen</h2>
<p>Brouwersmolen eget iaculis nisi quam in libero.</p>
</div>
</a>
<div class="dso-card-interactions">
<div class="dso-card-interaction">
<button type="button" class="btn btn-link"><span class="sr-only">Toon informatie over Brouwersmolen</span><svg class="di di-info">
<use href="../../dso-icons.svg#info" />
</svg></button>
</div>
</div>
</div>
<div class="dso-card">
<a href="#">
<div class="dso-rich-content">
<h2>{{ label }}</h2>
<p>{{ content | safe }}</p>
</div>
</a>
{% if interactions %}
<div class="dso-card-interactions">
{% for interaction in interactions %}
<div class="dso-card-interaction">
{% if interaction.toggle %}
<label>
<input type="checkbox" name="{{ interaction.toggle.id }}" />
<span class="sr-only">{{ label }}</span>
</label>
{% endif %}
{% if interaction.button %}
{% render '@button', interaction.button -%}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
/* Default */
label: Omgevingsplan Nieuwegein
content: 'Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.'
/* Aside */
label: Brouwersmolen
content: Brouwersmolen eget iaculis nisi quam in libero.
interactions:
- button:
type: button
modifier: link
icon: info
label: Toon informatie over Brouwersmolen
iconOnly: true
/* Below */
interactionsOri: below
label: Brouwersmolen
content: Brouwersmolen eget iaculis nisi quam in libero.
interactions:
- button:
type: button
modifier: link
icon: info
label: Toon informatie over Brouwersmolen
iconOnly: true