Navigation

Summary list

The summary list component is used to display a list of links, for example, under the Related content heading on simple landing pages.

Open this summary list example in a new tab
HTML
<ul class="occlss-summary-list">
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">List of all schools</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">School appeals</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">School transfers</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">Religious education</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">School meals</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">Exclusions</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">Music service</a>
  </li>
  <li class="occlss-summary-list__item occlss-summary-list__item--underlined occlss-summary-list__item--td">
    <a href="javascript:void(0);" class="occlss-summary-list__link">Being educated at home</a>
  </li>
</ul>

Changelog

1.0.0

  • Component added