{
  "component": "card",
  "fixtures": [
    {
      "name": "basic card",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with supertitle",
      "options": {
        "supertitle": "Card supertitle",
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><hgroup class=\"tna-hgroup-m tna-card__heading\"><p class=\"tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with plain supertitle",
      "options": {
        "supertitle": "Card supertitle",
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "plainSupertitle": true
      },
      "html": "<article class=\"tna-card\"><hgroup class=\"tna-hgroup-m tna-card__heading\"><p class=\"tna-hgroup__supertitle tna-hgroup__supertitle--plain\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "heading size",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "headingSize": "xl",
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "heading level",
      "options": {
        "title": "Card title",
        "headingLevel": 1,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h1 class=\"tna-heading-m tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with link",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "href": "#",
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with meta",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "meta": [
          {
            "text": "24th September 2023",
            "icon": "calendar"
          },
          {
            "text": "From £16",
            "icon": "ticket"
          },
          {
            "text": "Online",
            "icon": "location-dot"
          }
        ],
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips tna-dl-chips--plain\"><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></article>"
    },
    {
      "name": "with stacked meta",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "meta": [
          {
            "text": "24th September 2023",
            "icon": "calendar"
          },
          {
            "text": "From £16",
            "icon": "ticket"
          },
          {
            "text": "Online",
            "icon": "location-dot"
          }
        ],
        "metaStacked": true,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips tna-dl-chips--plain tna-dl-chips--stacked\"><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></article>"
    },
    {
      "name": "with accented meta",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "meta": [
          {
            "text": "24th September 2023",
            "icon": "calendar"
          },
          {
            "text": "From £16",
            "icon": "ticket"
          },
          {
            "text": "Online",
            "icon": "location-dot"
          }
        ],
        "accentMeta": true,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips\"><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></article>"
    },
    {
      "name": "with text",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "text": "Card body"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with image",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with lazily loaded image",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "lazyImage": true,
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" loading=\"lazy\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with image and alternative sources",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "imageSources": [
          {
            "src": "https://www.gstatic.com/webp/gallery/2.webp",
            "type": "image/webp"
          }
        ],
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with link and image",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "href": "#",
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\" aria-hidden=\"true\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with actions",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "actions": [
          {
            "text": "Card action",
            "href": "#"
          }
        ]
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
    },
    {
      "name": "with actions with titles",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "actions": [
          {
            "text": "Card action",
            "href": "#",
            "title": "Go and do the action"
          }
        ]
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" aria-label=\"Go and do the action\" title=\"Go and do the action\">Card action</a></div></div></article>"
    },
    {
      "name": "with actions with classes",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "actions": [
          {
            "text": "Card action",
            "href": "#",
            "classes": "card__test-class"
          }
        ]
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></div></article>"
    },
    {
      "name": "with actions with attributes",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "actions": [
          {
            "text": "Card action",
            "href": "#",
            "attributes": {
              "data-testattribute": "foobar"
            }
          }
        ]
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></div></article>"
    },
    {
      "name": "with a label",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "label": "New",
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with a coloured label",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "imageSrc": "https://loremflickr.com/640/360",
        "imageAlt": "A placeholder image",
        "imageWidth": 640,
        "imageHeight": 360,
        "label": "New",
        "labelColour": "green",
        "body": "<p>Card body</p>"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-chip--green tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with a plain style",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "style": "plain"
      },
      "html": "<article class=\"tna-card tna-card--padded tna-card--plain\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with a contrast style",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "style": "contrast"
      },
      "html": "<article class=\"tna-card tna-card--padded tna-background-contrast\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with a tint style",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "style": "tint"
      },
      "html": "<article class=\"tna-card tna-card--padded tna-background-tint\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with a accent style",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "style": "accent"
      },
      "html": "<article class=\"tna-card tna-card--padded tna-background-accent\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with an unknown style",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "style": "foobar"
      },
      "html": "<article class=\"tna-card tna-card--padded\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "horizontal card",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "horizontal": true
      },
      "html": "<article class=\"tna-card tna-card--horizontal\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "horizontal card with other horizontal options",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "horizontal": true,
        "horizontalOnSmall": true,
        "horizontalFlipped": true,
        "horizontalSmallImage": true
      },
      "html": "<article class=\"tna-card tna-card--horizontal tna-card--horizontal-on-small tna-card--flipped tna-card--horizontal-small-image\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "fully clickable",
      "options": {
        "title": "Card title",
        "href": "#",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "fullAreaClick": true
      },
      "html": "<article class=\"tna-card tna-card--full-click\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "fully clickable without href",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "fullAreaClick": true
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "fully clickable with actions",
      "options": {
        "title": "Card title",
        "href": "#",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "fullAreaClick": true,
        "actions": [
          {
            "text": "Card action",
            "href": "#"
          }
        ]
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
    },
    {
      "name": "with a different element",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "htmlElement": "div"
      },
      "html": "<div class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>"
    },
    {
      "name": "with classes for href items",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "href": "#",
        "body": "<p>Card body</p>",
        "hrefClasses": "card__test-class"
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link card__test-class\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with attributes for href items",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "href": "#",
        "body": "<p>Card body</p>",
        "hrefAttributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\" data-testattribute=\"foobar\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with classes",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "classes": "card__test-class"
      },
      "html": "<article class=\"tna-card card__test-class\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    },
    {
      "name": "with attributes",
      "options": {
        "title": "Card title",
        "headingLevel": 3,
        "body": "<p>Card body</p>",
        "attributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<article class=\"tna-card\" data-testattribute=\"foobar\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
    }
  ]
}