Card

Component preview opent in nieuw tabblad

Het .dso-card component mag alleen in .dso-card-list of .dso-card-grid worden gebruikt.

<!-- Default -->
<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>
<!-- Interactions -->
<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>
<div class="dso-card">
  <div class="dso-card-heading">
    <a href="#">
      <h2>
        <span>{{ label }}</span>
        {% render '@icon', {icon: 'chevron-right'} -%}
      </h2>
    </a>
    {% if interactions %}
      <div class="dso-card-interactions">
        {% for interaction in interactions %}
          <div class="dso-card-interaction">
            {% render '@button', interaction.button -%}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
  <div class="dso-card-content">
    <div class="dso-rich-content">
      <p>{{ content }}</p>
    </div>
  </div>
</div>
/* Default */
label: Omgevingsplan Nieuwegein
content: Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.
/* Interactions */
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