{
    "component": "card",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "heading": {
                    "title": "Example heading"
                },
                "content": {
                    "text": "This is a description"
                }
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    Example heading\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "with H3 in header",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "headingLevel": 3
                },
                "content": {
                    "text": "This is a description"
                }
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h3\n  class=\"govuk-heading-m\">\n  \n    Example heading\n  \n</h3>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "as a span",
            "options": {
                "element": "span",
                "heading": {
                    "title": "Example heading"
                },
                "content": {
                    "text": "This is a description"
                }
            },
            "html": "<span\n  class=\"lbcamden-card \n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    Example heading\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</span>",
            "hidden": false
        },
        {
            "name": "card with link in header",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                }
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "clickable card",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "clickable": true
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "decorated type 1",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "clickable": true,
                "type": "alt-1"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--alt-1\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "decorated type 2",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "clickable": true,
                "type": "alt-2"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--alt-2\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "decorated type 3",
            "options": {
                "heading": {
                    "title": "Example heading"
                },
                "content": {
                    "html": "This is a description with a <a href=\"#\">link</a> in it"
                },
                "clickable": true,
                "type": "alt-3"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--alt-3\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    Example heading\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <div>This is a description with a <a href=\"#\">link</a> in it</div>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "decorated type 1 with top border",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "topBorder": true,
                "clickable": true,
                "type": "alt-1"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--alt-1\n  \n   lbcamden-card--clickable\n   lbcamden-card--top-border\n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "promo link type",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "clickable": true,
                "type": "promo-link"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--promo-link\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n\n</div>",
            "hidden": false
        },
        {
            "name": "alternative promo link type",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "clickable": true,
                "type": "promo-link--alt"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--promo-link--alt\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n\n</div>",
            "hidden": false
        },
        {
            "name": "naked card",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "clickable": true,
                "type": "naked"
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--naked\n  \n   lbcamden-card--clickable\n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "with image",
            "options": {
                "heading": {
                    "title": "Example heading",
                    "href": "#"
                },
                "content": {
                    "text": "This is a description"
                },
                "clickable": true,
                "type": "alt-1",
                "image": {
                    "src": "/example-assets/images/1800x1200.jpg",
                    "alt": "Image of Camden market"
                }
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  lbcamden-card--alt-1\n  \n   lbcamden-card--clickable\n  \n   lbcamden-card--image\"\n  data-module=\"lbcamden-card\">\n\n  <picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"/example-assets/images/1800x1200.jpg\"\n    alt=\"Image of Camden market\"\n    \n    \n    \n    style=\"\"\n  />\n</picture>\n\n  <div class=\"lbcamden-card__content_wrapper\">\n\n\n<h2\n  class=\"govuk-heading-m\">\n  \n    <a href=\"#\">\n      Example heading\n    </a>\n  \n</h2>\n\n  <div class=\"lbcamden-card__content\">\n    \n      <p>This is a description</p>\n    \n  </div>\n\n  </div>\n\n</div>",
            "hidden": false
        },
        {
            "name": "attributes",
            "options": {
                "attributes": {
                    "data-test-attribute": "value",
                    "data-test-attribute-2": "value-2"
                }
            },
            "html": "<div\n  class=\"lbcamden-card \n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\" data-test-attribute=\"value\" data-test-attribute-2=\"value-2\">\n\n\n\n</div>",
            "hidden": true
        },
        {
            "name": "classes",
            "options": {
                "classes": "app-header--custom-modifier"
            },
            "html": "<div\n  class=\"lbcamden-card app-header--custom-modifier\n  \n  \n  \n  \"\n  data-module=\"lbcamden-card\">\n\n\n\n</div>",
            "hidden": true
        }
    ]
}