Cards

<div class="cards cards--home">
  <div class="card card--home blue">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        Resource Library</a>
      </h2>
      <p>Search IDRC's library of AI and data analytics resources</p>
    </div>
  </div>
  <div class="card card--home green">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        Events</a>
      </h2>
      <p>Find out about IDRC events and how you can participate</p>
    </div>
  </div>
  <div class="card card--home azure">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        Inclusive AI Initiatives</a>
      </h2>
      <p>Explore IDRC project activities</p>
    </div>
  </div>
  <div class="card card--home yellow">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        Regulating the Digital  <br  />
        Réguler le numérique</a>
      </h2>
      <p>Addressing digital exclusion / Lutter contre l’exclusion numérique</p>
    </div>
  </div>
</div>

{{ c("cards", {
  "cards": [
    {
      "variantClass": "home blue",
      "title": "Resource Library",
      "body": "Search IDRC's library of AI and data analytics resources"
    },
    {
      "variantClass": "home green",
      "title": "Events",
      "body": "Find out about IDRC events and how you can participate"
    },
    {
      "variantClass": "home azure",
      "title": "Inclusive AI Initiatives",
      "body": "Explore IDRC project activities"
    },
    {
      "variantClass": "home yellow",
      "title": "Regulating the Digital  \n                            Réguler le numérique",
      "body": "Addressing digital exclusion / Lutter contre l’exclusion numérique"
    }
  ],
  "variantClass": "home"
}) }}