DSO Toolkit | Component Library

Card: 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"></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>
 
<div class="dso-card">
  <a href="#">
    <div class="dso-rich-content">
      <h2>{{ label }}</h2>
      <p>{{ content }}</p>
    </div>
  </a>
  {{#if interactions.length }}
    <div class="dso-card-interactions">
      {{#each interactions}}
        <div class="dso-card-interaction">
          {{#if toggle }}
            <label>
              <input type="checkbox" name="{{ toggle.id }}" />
              <span class="sr-only">{{ label }}</span>
            </label>
          {{/if}}
          {{#if button }}
            {{> '@button' button }}
          {{/if}}
        </div>
      {{/each}}
    </div>
  {{/if}}
</div>
 
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

Het dso-card component mag alleen in het dso-cards worden gebruikt.