Cards

<div class="cards cards--resources">
                          <div class="card card--resource">
                          <div class="card__content flow">
                          <h2 class="h3">
                            <a href="#">
                            2023 AI Index Report</a>
                          </h2>
                          <p class="meta media-type">
                          <svg aria-hidden="true"><use xlink:href="#media-type" /></svg>
                           Media Type: Website Article</p>
                          <p class="meta readability">
                          <svg aria-hidden="true"><use xlink:href="#readability" /></svg>
                           Readability: Intermediate</p>
                          <p class="meta topic">
                          <svg aria-hidden="true"><use xlink:href="#topics" /></svg>
                           Topic: AI ethics and policy</p>
                          <p class="meta tags">
                          <svg aria-hidden="true"><use xlink:href="#tags" /></svg>
                          Tags:<div class="tags">
                          <span class="tag tag--lg">AI and Machine Learning</span>
                          <span class="tag tag--lg">Ethics</span>
                          <span class="tag tag--lg">Fairness</span>
                          <span class="tag tag--lg">Bias</span>
                          <span class="tag tag--lg">Business</span>
                          <span class="tag tag--lg">Research Centre</span>
                        </div></p>
                      </div>
                    </div>
                    <div class="card card--resource">
                    <div class="card__content flow">
                    <h2 class="h3">
                      <a href="#">
                      2023 AI Index Report</a>
                    </h2>
                    <p class="meta media-type">
                    <svg aria-hidden="true"><use xlink:href="#media-type" /></svg>
                     Media Type: Website Article</p>
                    <p class="meta readability">
                    <svg aria-hidden="true"><use xlink:href="#readability" /></svg>
                     Readability: Intermediate</p>
                    <p class="meta topic">
                    <svg aria-hidden="true"><use xlink:href="#topics" /></svg>
                     Topic: AI ethics and policy</p>
                    <p class="meta tags">
                    <svg aria-hidden="true"><use xlink:href="#tags" /></svg>
                    Tags:<div class="tags">
                    <span class="tag tag--lg">AI and Machine Learning</span>
                    <span class="tag tag--lg">Ethics</span>
                    <span class="tag tag--lg">Fairness</span>
                    <span class="tag tag--lg">Bias</span>
                    <span class="tag tag--lg">Business</span>
                    <span class="tag tag--lg">Research Centre</span>
                  </div></p>
                </div>
              </div>
              <div class="card card--resource">
              <div class="card__content flow">
              <h2 class="h3">
                <a href="#">
                2023 AI Index Report</a>
              </h2>
              <p class="meta media-type">
              <svg aria-hidden="true"><use xlink:href="#media-type" /></svg>
               Media Type: Website Article</p>
              <p class="meta readability">
              <svg aria-hidden="true"><use xlink:href="#readability" /></svg>
               Readability: Intermediate</p>
              <p class="meta topic">
              <svg aria-hidden="true"><use xlink:href="#topics" /></svg>
               Topic: AI ethics and policy</p>
              <p class="meta tags">
              <svg aria-hidden="true"><use xlink:href="#tags" /></svg>
              Tags:<div class="tags">
              <span class="tag tag--lg">AI and Machine Learning</span>
              <span class="tag tag--lg">Ethics</span>
              <span class="tag tag--lg">Fairness</span>
              <span class="tag tag--lg">Bias</span>
              <span class="tag tag--lg">Business</span>
              <span class="tag tag--lg">Research Centre</span>
            </div></p>
          </div>
        </div>
        <div class="card card--resource">
        <div class="card__content flow">
        <h2 class="h3">
          <a href="#">
          2023 AI Index Report</a>
        </h2>
        <p class="meta media-type">
        <svg aria-hidden="true"><use xlink:href="#media-type" /></svg>
         Media Type: Website Article</p>
        <p class="meta readability">
        <svg aria-hidden="true"><use xlink:href="#readability" /></svg>
         Readability: Intermediate</p>
        <p class="meta topic">
        <svg aria-hidden="true"><use xlink:href="#topics" /></svg>
         Topic: AI ethics and policy</p>
        <p class="meta tags">
        <svg aria-hidden="true"><use xlink:href="#tags" /></svg>
        Tags:<div class="tags">
        <span class="tag tag--lg">AI and Machine Learning</span>
        <span class="tag tag--lg">Ethics</span>
        <span class="tag tag--lg">Fairness</span>
        <span class="tag tag--lg">Bias</span>
        <span class="tag tag--lg">Business</span>
        <span class="tag tag--lg">Research Centre</span>
      </div></p>
    </div>
  </div>
</div>

{{ c("cards", {
  "cards": [
    {
      "variantClass": "resource",
      "title": "2023 AI Index Report",
      "mediaType": "Website Article",
      "readability": "Intermediate",
      "topic": "AI ethics and policy",
      "tags": [
        "AI and Machine Learning",
        "Ethics",
        "Fairness",
        "Bias",
        "Business",
        "Research Centre"
      ]
    },
    {
      "variantClass": "resource",
      "title": "2023 AI Index Report",
      "mediaType": "Website Article",
      "readability": "Intermediate",
      "topic": "AI ethics and policy",
      "tags": [
        "AI and Machine Learning",
        "Ethics",
        "Fairness",
        "Bias",
        "Business",
        "Research Centre"
      ]
    },
    {
      "variantClass": "resource",
      "title": "2023 AI Index Report",
      "mediaType": "Website Article",
      "readability": "Intermediate",
      "topic": "AI ethics and policy",
      "tags": [
        "AI and Machine Learning",
        "Ethics",
        "Fairness",
        "Bias",
        "Business",
        "Research Centre"
      ]
    },
    {
      "variantClass": "resource",
      "title": "2023 AI Index Report",
      "mediaType": "Website Article",
      "readability": "Intermediate",
      "topic": "AI ethics and policy",
      "tags": [
        "AI and Machine Learning",
        "Ethics",
        "Fairness",
        "Bias",
        "Business",
        "Research Centre"
      ]
    }
  ],
  "variantClass": "resources"
}) }}