{
    "component": "tag",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "text": "alpha"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag\">\n  alpha\n</strong>"
        },
        {
            "name": "inactive",
            "options": {
                "text": "alpha",
                "classes": "govuk-tag--grey"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  alpha\n</strong>"
        },
        {
            "name": "grey",
            "options": {
                "text": "Grey",
                "classes": "govuk-tag--grey"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
        },
        {
            "name": "blue",
            "options": {
                "text": "Blue",
                "classes": "govuk-tag--blue"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>"
        },
        {
            "name": "turquoise",
            "options": {
                "text": "Turquoise",
                "classes": "govuk-tag--turquoise"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
        },
        {
            "name": "green",
            "options": {
                "text": "Green",
                "classes": "govuk-tag--green"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>"
        },
        {
            "name": "purple",
            "options": {
                "text": "Purple",
                "classes": "govuk-tag--purple"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>"
        },
        {
            "name": "pink",
            "options": {
                "text": "Pink",
                "classes": "govuk-tag--pink"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
        },
        {
            "name": "red",
            "options": {
                "text": "Red",
                "classes": "govuk-tag--red"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>"
        },
        {
            "name": "orange",
            "options": {
                "text": "Orange",
                "classes": "govuk-tag--orange"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>"
        },
        {
            "name": "yellow",
            "options": {
                "text": "Yellow",
                "classes": "govuk-tag--yellow"
            },
            "hidden": false,
            "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>"
        },
        {
            "name": "attributes",
            "options": {
                "text": "Tag with attributes",
                "attributes": {
                    "data-test": "attribute",
                    "id": "my-tag"
                }
            },
            "hidden": true,
            "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>"
        },
        {
            "name": "html as text",
            "options": {
                "text": "<span>alpha</span>"
            },
            "hidden": true,
            "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;alpha&lt;/span&gt;\n</strong>"
        },
        {
            "name": "html",
            "options": {
                "html": "<span>alpha</span>"
            },
            "hidden": true,
            "html": "<strong class=\"govuk-tag\">\n  <span>alpha</span>\n</strong>"
        }
    ]
}