Cards

There are no notes for this item.

<!-- Default -->
<ul class="dso-cards">

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

<!-- Interactions Bottom -->
<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>

<!-- Flat -->
<ul class="dso-cards dso-flat">

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

<ul {{ className('dso-cards', modifiers, [interactionsLocation, 'dso-interactions-' + interactionsLocation]) }}>
  {% for card in cards %}
    <li>
      {% render '@card', card %}
    </li>
  {% endfor %}
</ul>

/* Default */
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

/* Interactions Bottom */
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

/* Flat */
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
modifiers: dso-flat