1. Demo
  2. Notes
  3. .html
  4. .njk & context
  5. Full Screen ↗

Cards

<div class="cards">
  <div class="card card--initiative">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        We Count Badges</a>
      </h2>
      <p class="meta author">Rachel Spence</p>
      <p class="meta date">August 28, 2024</p>
      <p>We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.</p>
    </div>
    <div class="card__image">
      <img src="https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png"  />
    </div>
  </div>
  <div class="card card--initiative">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        We Count Badges</a>
      </h2>
      <p class="meta author">Rachel Spence</p>
      <p class="meta date">August 28, 2024</p>
      <p>We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.</p>
    </div>
    <div class="card__image">
      <img src="https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png"  />
    </div>
  </div>
  <div class="card card--initiative">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        We Count Badges</a>
      </h2>
      <p class="meta author">Rachel Spence</p>
      <p class="meta date">August 28, 2024</p>
      <p>We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.</p>
    </div>
    <div class="card__image">
      <img src="https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png"  />
    </div>
  </div>
  <div class="card card--initiative">
    <div class="card__content flow">
      <h2 class="h3">
        <a href="#">
        We Count Badges</a>
      </h2>
      <p class="meta author">Rachel Spence</p>
      <p class="meta date">August 28, 2024</p>
      <p>We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.</p>
    </div>
    <div class="card__image">
      <img src="https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png"  />
    </div>
  </div>
</div>
{{ c("cards", {
  "cards": [
    {
      "title": "We Count Badges",
      "variantClass": "initiative",
      "author": "Rachel Spence",
      "date": "August 28, 2024",
      "body": "We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.",
      "imageSrc": "https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png",
      "imageAlt": "We Count Learner badge"
    },
    {
      "title": "We Count Badges",
      "variantClass": "initiative",
      "author": "Rachel Spence",
      "date": "August 28, 2024",
      "body": "We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.",
      "imageSrc": "https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png",
      "imageAlt": "We Count Learner badge"
    },
    {
      "title": "We Count Badges",
      "variantClass": "initiative",
      "author": "Rachel Spence",
      "date": "August 28, 2024",
      "body": "We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.",
      "imageSrc": "https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png",
      "imageAlt": "We Count Learner badge"
    },
    {
      "title": "We Count Badges",
      "variantClass": "initiative",
      "author": "Rachel Spence",
      "date": "August 28, 2024",
      "body": "We Count badges enabled people to showcase their proficiency in the growing fields of AI, data systems and inclusive data practices as well as other skills.",
      "imageSrc": "https://wecount.inclusivedesign.ca/uploads/Badges_final_LEARNER-300x300.png",
      "imageAlt": "We Count Learner badge"
    }
  ]
}) }}