{
    "component": "promo-gallery",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "items": [
                    {
                        "title": "Housing Repairs",
                        "href": "#1"
                    },
                    {
                        "title": "Leaseholder and Freeholders",
                        "href": "#2"
                    },
                    {
                        "title": "Bid for a property",
                        "href": "#3"
                    },
                    {
                        "title": "Apply for council housing",
                        "href": "#4"
                    }
                ]
            },
            "html": "<div class=\"lbcamden-promo-gallery  \">\n    \n\n    \n\n    <ul class=\"lbcamden-card-grid lbcamden-card-grid--popular\">\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#1\">Housing Repairs</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#2\">Leaseholder and Freeholders</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#3\">Bid for a property</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#4\">Apply for council housing</a>\n            </li>\n        \n    </ul>\n\n    \n</div>",
            "hidden": false
        },
        {
            "name": "with heading and description",
            "options": {
                "heading": "Popular",
                "shortDescription": "Find relevant services, support and things to do.",
                "items": [
                    {
                        "title": "Housing Repairs",
                        "href": "#1"
                    },
                    {
                        "title": "Leaseholder and Freeholders",
                        "href": "#2"
                    },
                    {
                        "title": "Bid for a property",
                        "href": "#3"
                    },
                    {
                        "title": "Apply for council housing",
                        "href": "#4"
                    }
                ]
            },
            "html": "<div class=\"lbcamden-promo-gallery  \">\n    \n      <h2>Popular</h2>\n    \n\n    \n      <p class=\"lbcamden-promo-gallery__description\">\n        Find relevant services, support and things to do.\n      </p>\n    \n\n    <ul class=\"lbcamden-card-grid lbcamden-card-grid--popular\">\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#1\">Housing Repairs</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#2\">Leaseholder and Freeholders</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#3\">Bid for a property</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#4\">Apply for council housing</a>\n            </li>\n        \n    </ul>\n\n    \n</div>",
            "hidden": false
        },
        {
            "name": "with surround",
            "options": {
                "items": [
                    {
                        "title": "Housing Repairs",
                        "href": "#1"
                    },
                    {
                        "title": "Leaseholder and Freeholders",
                        "href": "#2"
                    },
                    {
                        "title": "Bid for a property",
                        "href": "#3"
                    },
                    {
                        "title": "Apply for council housing",
                        "href": "#4"
                    }
                ],
                "surround": true
            },
            "html": "<div class=\"lbcamden-promo-gallery lbcamden-surround  \">\n    \n\n    \n\n    <ul class=\"lbcamden-card-grid lbcamden-card-grid--popular\">\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#1\">Housing Repairs</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#2\">Leaseholder and Freeholders</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#3\">Bid for a property</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#4\">Apply for council housing</a>\n            </li>\n        \n    </ul>\n\n    \n</div>",
            "hidden": false
        },
        {
            "name": "with show all button in panel",
            "options": {
                "heading": "Popular",
                "showAllHref": "#",
                "showAllLabel": "All services",
                "items": [
                    {
                        "title": "Housing Repairs",
                        "href": "#1"
                    },
                    {
                        "title": "Leaseholder and Freeholders",
                        "href": "#2"
                    },
                    {
                        "title": "Bid for a property",
                        "href": "#3"
                    },
                    {
                        "title": "Apply for council housing",
                        "href": "#4"
                    }
                ]
            },
            "html": "<div class=\"lbcamden-promo-gallery  \">\n    \n      <h2>Popular</h2>\n    \n\n    \n\n    <ul class=\"lbcamden-card-grid lbcamden-card-grid--popular\">\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#1\">Housing Repairs</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#2\">Leaseholder and Freeholders</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#3\">Bid for a property</a>\n            </li>\n        \n            <li class=\"lbcamden-card-grid--link-wrapper\">\n                <a class=\"lbcamden-card--clickable lbcamden-link--promo lbcamden-link--promo-alt\" href=\"#4\">Apply for council housing</a>\n            </li>\n        \n    </ul>\n\n    \n      <a href=\"#\" class=\"lbcamden-link--promo lbcamden-link--promo--large lbcamden-promo-gallery__all\">\n        All services\n      </a>\n    \n</div>",
            "hidden": false
        },
        {
            "name": "classes",
            "options": {
                "items": [],
                "classes": "app-promo-gallery--custom-modifier"
            },
            "html": "<div class=\"lbcamden-promo-gallery  app-promo-gallery--custom-modifier\">\n    \n\n    \n\n    <ul class=\"lbcamden-card-grid lbcamden-card-grid--popular\">\n        \n    </ul>\n\n    \n</div>",
            "hidden": true
        }
    ]
}