Cards: Interactions Bottom

There are no notes for this item.

<ul class="dso-cards dso-interactions-bottom">

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

    </li>

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

    </li>

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

    </li>

</ul>
    {% for card in cards %}
  • {% render '@card', card %}
  • {% endfor %}
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:
      - toggle:
          id: brouwersmolen
      - button:
          type: button
          modifier: link
          icon: info
          label: Toon informatie
          iconOnly: true
  - 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
interactionsLocation: bottom