DSO Toolkit | Component Library

Cards: 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"></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"></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 class="dso-cards{{#if interactionsLocation}} dso-interactions-{{ interactionsLocation }}{{/if}}">
  {{#each cards}}
    <li>
      {{> '@card' }}
    </li>
  {{/each}}
</ul>
 
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

There are no notes for this item.