Cards

<div class="cards">
  <div class="card card--insight">
    <div class="header">
      <span class="badge badge--insight">Insight</span>
      <div>
        <svg viewBox="0 0 22 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 0 0 0 3v-3Zm19.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.545-9.547a1.5 1.5 0 1 0-2.122 2.122L17.88 12l-8.486 8.485a1.5 1.5 0 1 0 2.122 2.122l9.546-9.546ZM2 13.5h18v-3H2v3Z" fill="currentColor"/></svg>
      </div>
    </div>
    <div class="card__body flow">
      <h3><a href="#">Diverse participation and perspectives</a></h3>
      <p>In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills.</p>
    </div>
  </div>
  <div class="card card--practice">
    <div class="header">
      <span class="badge badge--practice">Practice</span>
      <div>
        <svg viewBox="0 0 22 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 0 0 0 3v-3Zm19.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.545-9.547a1.5 1.5 0 1 0-2.122 2.122L17.88 12l-8.486 8.485a1.5 1.5 0 1 0 2.122 2.122l9.546-9.546ZM2 13.5h18v-3H2v3Z" fill="currentColor"/></svg>
      </div>
    </div>
    <div class="card__body flow">
      <h3><a href="#">Diverse participation and perspectives</a></h3>
      <p>In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills.</p>
    </div>
  </div>
  <div class="card card--technique">
    <div class="header">
      <span class="badge badge--technique">Technique</span>
      <div>
        <svg viewBox="0 0 22 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 0 0 0 3v-3Zm19.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.545-9.547a1.5 1.5 0 1 0-2.122 2.122L17.88 12l-8.486 8.485a1.5 1.5 0 1 0 2.122 2.122l9.546-9.546ZM2 13.5h18v-3H2v3Z" fill="currentColor"/></svg>
      </div>
    </div>
    <div class="card__body flow">
      <h3><a href="#">Diverse participation and perspectives</a></h3>
      <p>In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills.</p>
    </div>
  </div>
  <div class="card card--activity">
    <div class="header">
      <span class="badge badge--activity">Activity</span>
      <div>
        <svg viewBox="0 0 22 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 0 0 0 3v-3Zm19.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.545-9.547a1.5 1.5 0 1 0-2.122 2.122L17.88 12l-8.486 8.485a1.5 1.5 0 1 0 2.122 2.122l9.546-9.546ZM2 13.5h18v-3H2v3Z" fill="currentColor"/></svg>
      </div>
    </div>
    <div class="card__body flow">
      <h3><a href="#">Diverse participation and perspectives</a></h3>
      <p>In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills.</p>
    </div>
  </div>
</div>

{{ c("cards", {
  "cards": [
    {
      "badge": "Insight",
      "variantClass": "insight",
      "title": "Diverse participation and perspectives",
      "intro": "In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills."
    },
    {
      "badge": "Practice",
      "variantClass": "practice",
      "title": "Diverse participation and perspectives",
      "intro": "In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills."
    },
    {
      "badge": "Technique",
      "variantClass": "technique",
      "title": "Diverse participation and perspectives",
      "intro": "In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills."
    },
    {
      "badge": "Activity",
      "variantClass": "activity",
      "title": "Diverse participation and perspectives",
      "intro": "In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills."
    }
  ]
}) }}