Sidebar item section
This component shows users the content that is closely related to the current page.
<div class="occlss-sidebar-item-section occlss-sidebar-item-section--council" role="complementary">
<nav class="occlss-sidebar-item-section__navbar" aria-label="Related content">
<ul class="occlss-summary-list occlss-summary-list--sidebar-nav">
<li class="occlss-summary-list__item">
<h2 class="occlss-sidebar-item-section__title">Related content</h4>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Teaching and school support vacancies</a>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Working in children's social care</a>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Benefits of working for Oxfordshire County Council</a>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Fire service recruitment</a>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Register for casual or temporary work</a>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">Examples of employment contracts</a>
</li>
<li class="occlss-summary-list__item">
<div class="occlss-splitter occlss-u-tspace-xs occlss-u-bspace-sm"></div>
<h3 class="occlss-u-bspace-xs">External</h3>
</li>
<li class="occlss-summary-list__item">
<a href="javascript:void(0);" class="occlss-summary-list__link">All job vacancies</a>
</li>
</ul>
</nav>
</div>
When to use this component
Think about pages that are related to the current content but are not referenced directly within it. What might the person have been looking for that is similar to the page they are on? For example, on the ‘Apply for a Blue Badge’ page, the user may need the ‘Renew a Blue Badge’ page instead.
If there are no related pages, the sidebar is blank. Avoid adding links to pages that are already linked from the page content.
Modifier classes
Container .occlss-sidebar-item-section modifier
.occlss-sidebar-item-section--council the modifier will add colour to the vertical line. This modifier is used only if the sidebar item appears in the council area.
.occlss-sidebar-item-section--business this modifier is used only if the sidebar item appears in the business area.
.occlss-sidebar-item-section--residents this modifier is used only if the sidebar item appears in the residents area.
Changelog
1.0.0
- Component added