Tabs

Popular content pane

This component is used to display a list of links within a section or subject area. It can help the user locate the content they want quickly.

Open this popular content pane example in a new tab
HTML
<div class="js-occlss-popular-content-pane occlss-popular-content-pane occlss-popular-content-pane--residence"
  id="tab-jobs" tabindex="0" aria-controls="pane-jobs" role="tab">
  <h2 class="occlss-popular-content-pane__heading">Jobs</h2>
  <div class="occlss-popular-content-pane__content" id="pane-jobs" aria-labelledby="tab-jobs" role="tabpanel">
    <ul class="occlss-summary-list occlss-summary-list--popular-content-pane">
      <li class="occlss-summary-list__item occlss-summary-list__item--underlined">
        <a href="javascript:void(0);"
          class="occlss-summary-list__link ">
          Current vacancies
        </a>
      </li>
      <li class="occlss-summary-list__item occlss-summary-list__item--underlined">
        <a href="javascript:void(0);"
          class="occlss-summary-list__link ">
          Teaching and school vacancies
        </a>
      </li>
      <li class="occlss-summary-list__item occlss-summary-list__item--underlined">
        <a href="javascript:void(0);"
          class="occlss-summary-list__link ">
          Childcare vacancies
        </a>
      </li>
      <li class="occlss-summary-list__item occlss-summary-list__item--underlined">
        <a href="javascript:void(0);"
          class="occlss-summary-list__link ">
          Adult social care vacancies
        </a>
      </li>
      <li class="occlss-summary-list__item occlss-summary-list__item--underlined">
        <a href="javascript:void(0);"
          class="occlss-summary-list__link ">
          More jobs
        </a>
      </li>
    </ul>
  </div>
</div>

When to use this component

This component can be used on its own on a campaign page or homepage, or with other content panes. The colour of the pane will be inherited from the section of the website it is in.

On mobile devices, the pane will collapse with a down-pointing arrow to open the link list.

Modifier classes

Container class .occlss-popular-content-pane mod class .occlss-popular-content-pane--residents,.occlss-popular-content-pane--business,.occlss-popular-content-pane--council this mod class will add the panel colour.

Changelog

1.0.0

  • Component added