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

Card

<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>
{{ c("card", {
  "title": "2023 AI Index Report",
  "variantClass": "resource",
  "mediaType": "Website Article",
  "readability": "Intermediate",
  "topic": "AI ethics and policy",
  "tags": [
    "AI and Machine Learning",
    "Ethics",
    "Fairness",
    "Bias",
    "Business",
    "Research Centre"
  ]
}) }}