Hero

Top tasks pane

This component is used only on the residents homepage (main Oxfordshire County Council homepage). It allows a user to navigate to the most popular services that can be accessed online.

Open this top tasks pane example in a new tab
HTML
<div class="occlss-top-tasks-pane occlss-top-tasks-pane--residents">
  <div class="occlss-top-tasks-pane__wrapper">
    <div class="occlss-layout occlss-top-tasks-pane__layout">
      <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
        <div class="occlss-top-tasks-pane__content">
          <h2 class="occlss-top-tasks-pane__heading">Apply</h2>
          <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Jobs</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Blue Badge</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Bus pass</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Resident parking permit</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
        <div class="occlss-top-tasks-pane__content">
          <h2 class="occlss-top-tasks-pane__heading">Pay</h2>
          <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Parking tickets</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Certificates</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Ceremonies</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Council Tax</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
        <div class="occlss-top-tasks-pane__content">
          <h2 class="occlss-top-tasks-pane__heading">Report</h2>
          <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Pothole</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Faulty street light</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Safeguarding concern</a>
            </li>
            <li class="occlss-summary-list__item">
              <a href="javascript:void(0);" class="occlss-summary-list__link ">Street problem</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Changelog

1.0.0

  • Component added