Card

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">

            <label>
                <input type="checkbox" name="brouwersmolen" />
                <span class="sr-only">Brouwersmolen</span>
            </label>

        </div>

        <div class="dso-card-interaction">

            <button type="button" title="Toon informatie" class="btn btn-link"><span class="sr-only">Toon informatie</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">

            <label>
                <input type="checkbox" name="brouwersmolen" />
                <span class="sr-only">Brouwersmolen</span>
            </label>

        </div>

        <div class="dso-card-interaction">

            <button type="button" title="Toon informatie" class="btn btn-link"><span class="sr-only">Toon informatie</span><svg class="di di-info">
                    <use href="../../dso-icons.svg#info" />
                </svg></button>

        </div>

    </div>

</div>
      

  
    

      
{{ label }}

      
{{ content | safe }}

    

  
  {% if interactions %}
    

      {% for interaction in interactions %}
        

          {% if interaction.toggle %}
            
          {% endif %}
          {% if interaction.button %}
            {% render '@button', interaction.button -%}
          {% endif %}
        

      {% endfor %}
    

  {% endif %}

/* 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:
  - toggle:
      id: brouwersmolen
  - button:
      type: button
      modifier: link
      icon: info
      label: Toon informatie
      iconOnly: true


/* Below */
interactionsOri: below
label: Brouwersmolen
content: Brouwersmolen eget iaculis nisi quam in libero.
interactions:
  - toggle:
      id: brouwersmolen
  - button:
      type: button
      modifier: link
      icon: info
      label: Toon informatie
      iconOnly: true