{
  "title": "Card",
  "preview": "@preview-page",
  "context": {
    "title": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur",
    "date": "20 July 2019",
    "tag": "News",
    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
  },
  "variants": [
    {
      "name": "Without image",
      "view": "card--no-image.hbs"
    },
    {
      "name": "Not clickable",
      "view": "card--no-click.hbs",
      "notes": "This card variant removes click focus from the whole card. This is to accommodate multiple links.",
      "context": {
        "content": "The default card is a single clickable element but this one allows individual elements to be clickable. This supports multiple links and actions."
      }
    },
    {
      "name": "Borderless",
      "notes": "This card variant removes border and padding. The card operates as a container for elements without the visual prominence. Combining with `health-card--clickable` allows the whole card to remain clickable.",
      "context": {
        "class": "health-card--borderless",
        "content": "This card removes the border and internal padding."
      }
    },
    {
      "name": "Highlight",
      "view": "card--no-image.hbs",
      "context": {
        "class": "health-card--highlight",
        "content": "This card includes a highlight keyline."
      }
    },
    {
      "name": "Centred",
      "view": "card--no-click.hbs",
      "context": {
        "class": "health-card--centered",
        "content": "This card centres all content."
      }
    },
    {
      "name": "Horizontal",
      "context": {
        "class": "health-card--horizontal",
        "content": "This card presents image and body side-by-side."
      }
    },
    {
      "name": "Contact",
      "view": "card--contact.hbs",
      "context": {
        "class": "health-card--contact",
        "content": "This card presents a contact."
      }
    },
    {
      "name": "Contact (horizontal)",
      "view": "card--contact.hbs",
      "context": {
        "class": "health-card--contact-horizontal",
        "content": "This card presents a contact in a horizontal layout."
      }
    },
    {
      "name": "Full colour (primary)",
      "view": "card--no-image.hbs",
      "context": {
        "class": "health-card--colour-primary",
        "content": "This card uses the primary colour as a background."
      }
    },
    {
      "name": "Full colour (secondary)",
      "view": "card--no-image.hbs",
      "context": {
        "class": "health-card--colour-secondary",
        "content": "This card uses the secondary colour as a background."
      }
    },
    {
      "name": "Full colour (tertiary)",
      "view": "card--no-image.hbs",
      "context": {
        "class": "health-card--colour-tertiary",
        "content": "This card uses the tertiary colour as a background."
      }
    },
    {
      "name": "Full colour (quaternary)",
      "view": "card--no-image.hbs",
      "context": {
        "class": "health-card--colour-quaternary",
        "content": "This card uses the quaternary colour as a background."
      }
    },
    {
      "name": "Multple links",
      "view": "card--multiple-links.hbs",
      "status": "wip"
    }
  ]
}