Panel examples

• # default

  Open this example in a new tab

  Application complete

  Your reference number: HDJ2123F

  {
    "titleHtml": "Application complete",
    "text": "Your reference number: HDJ2123F"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleHtml": "Application complete",
    "text": "Your reference number: HDJ2123F"
  }) }}
          

• # title html as text

  Open this example in a new tab

  Application <strong>not</strong> complete

  Please complete form 1

  {
    "titleText": "Application <strong>not</strong> complete",
    "text": "Please complete form 1"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application <strong>not</strong> complete",
    "text": "Please complete form 1"
  }) }}
          

• # title html

  Open this example in a new tab

  Application not complete

  Please complete form 1

  {
    "titleHtml": "Application <strong>not</strong> complete",
    "html": "Please complete <strong>form 1</strong>"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleHtml": "Application <strong>not</strong> complete",
    "html": "Please complete <strong>form 1</strong>"
  }) }}
          

• # body html as text

  Open this example in a new tab

  Application complete

  Your reference number<br><strong>HDJ2123F</strong>

  {
    "titleText": "Application complete",
    "text": "Your reference number<br><strong>HDJ2123F</strong>"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete",
    "text": "Your reference number<br><strong>HDJ2123F</strong>"
  }) }}
          

• # body html

  Open this example in a new tab

  Application complete

  Your reference number
  HDJ2123F

  {
    "titleText": "Application complete",
    "html": "Your reference number<br><strong>HDJ2123F</strong>"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete",
    "html": "Your reference number<br><strong>HDJ2123F</strong>"
  }) }}
          

• # classes

  Open this example in a new tab

  Application complete

  Your reference number is HDJ2123F

  {
    "titleText": "Application complete",
    "text": "Your reference number is HDJ2123F",
    "classes": "extra-class one-more-class"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete",
    "text": "Your reference number is HDJ2123F",
    "classes": "extra-class one-more-class"
  }) }}
          

• # attributes

  Open this example in a new tab

  Application complete

  Your reference number is HDJ2123F

  {
    "titleText": "Application complete",
    "text": "Your reference number is HDJ2123F",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    }
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete",
    "text": "Your reference number is HDJ2123F",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    }
  }) }}
          

• # title with no body text

  Open this example in a new tab

  Application complete

  {
    "titleText": "Application complete"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete"
  }) }}
          

• # custom heading level

  Open this example in a new tab

  Application complete

  Your reference number: HDJ2123F

  {
    "titleText": "Application complete",
    "headingLevel": 2,
    "text": "Your reference number: HDJ2123F"
  }

  
  {% from "govuk/components/panel/macro.njk" import govukPanel %}
  
  {{ govukPanel({
    "titleText": "Application complete",
    "headingLevel": 2,
    "text": "Your reference number: HDJ2123F"
  }) }}