Tabs

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#england-wales">
        England and Wales
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#scotland">
        Scotland
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#northern-ireland">
        Northern Ireland
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="england-wales">
  
    <p>The next bank holiday in England and Wales is <strong>5 May</strong> – Early May bank holiday.</p>
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="scotland">
  
    <p>The next bank holiday in Scotland is <strong>5 May</strong> – Early May bank holiday.</p>
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="northern-ireland">
  
    <p>The next bank holiday in Northern Ireland is <strong>5 May</strong> – Early May bank holiday.</p>
  
  </div>
    
  

</div>

{{ govukTabs({
  "items": [
    {
      "label": "England and Wales",
      "id": "england-wales",
      "panel": {
        "html": "<p>The next bank holiday in England and Wales is <strong>5 May</strong> – Early May bank holiday.</p>"
      }
    },
    {
      "label": "Scotland",
      "id": "scotland",
      "panel": {
        "html": "<p>The next bank holiday in Scotland is <strong>5 May</strong> – Early May bank holiday.</p>"
      }
    },
    {
      "label": "Northern Ireland",
      "id": "northern-ireland",
      "panel": {
        "html": "<p>The next bank holiday in Northern Ireland is <strong>5 May</strong> – Early May bank holiday.</p>"
      }
    }
  ]
}) }}