govuk-frontend/dist/govuk/components/panel/fixtures.json

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{
    "component": "panel",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "titleHtml": "Application complete",
                "text": "Your reference number: HDJ2123F"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
        },
        {
            "name": "custom heading level",
            "options": {
                "titleText": "Application complete",
                "headingLevel": 2,
                "text": "Your reference number: HDJ2123F"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h2 class=\"govuk-panel__title\">\n    Application complete\n  </h2>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
        },
        {
            "name": "title html as text",
            "options": {
                "titleText": "Application <strong>not</strong> complete",
                "text": "Please complete form 1"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n</div>"
        },
        {
            "name": "title html",
            "options": {
                "titleHtml": "Application <strong>not</strong> complete",
                "html": "Please complete <strong>form 1</strong>"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n</div>"
        },
        {
            "name": "body html as text",
            "options": {
                "titleText": "Application complete",
                "text": "Your reference number<br><strong>HDJ2123F</strong>"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n</div>"
        },
        {
            "name": "body html",
            "options": {
                "titleText": "Application complete",
                "html": "Your reference number<br><strong>HDJ2123F</strong>"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n</div>"
        },
        {
            "name": "classes",
            "options": {
                "titleText": "Application complete",
                "text": "Your reference number is HDJ2123F",
                "classes": "extra-class one-more-class"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
        },
        {
            "name": "attributes",
            "options": {
                "titleText": "Application complete",
                "text": "Your reference number is HDJ2123F",
                "attributes": {
                    "first-attribute": "foo",
                    "second-attribute": "bar"
                }
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
        },
        {
            "name": "title with no body text",
            "options": {
                "titleText": "Application complete"
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "screenshot": false,
            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n</div>"
        }
    ]
}