A-to-Z
A to Z lists are used to display lists of links alphabetically. This is useful to display a lot of links on one page.
<h2 class="is-size-3 has-heading-line">A-Z of services</h2>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<ul class="pagination-list">
<li><a class="pagination-link" href="#a">A</a></li>
<li><a class="pagination-link" href="#b">B</a></li>
<li><a class="pagination-link" href="#c">C</a></li>
<li><a class="pagination-link" href="#e">E</a></li>
<li><a class="pagination-link" href="#f">F</a></li>
<li><a class="pagination-link" href="#h">H</a></li>
</ul>
</nav>
<h3><a class="anchor" id="a"></a>A</h3>
<ul>
<li><a href="#">Academic Advisors</a></li>
<li><a href="#">Accommodation Bureau</a></li>
</ul>
<h3><a class="anchor" id="b"></a>B</h3>
<ul>
<li><a href="#">Brookes Union</a></li>
<li><a href="#">BrookesBus</a></li>
</ul>
<h3><a class="anchor" id="c"></a>C</h3>
<ul>
<li><a href="#">Careers Centre</a></li>
<li><a href="#">Chaplaincy</a></li>
<li><a href="#">Computer Services</a></li>
<li><a href="#">Computer Services - Eduroam</a></li>
<li><a href="#">Computer Services - Google Apps (includes Email and Calendar)</a></li>
<li><a href="#">Computer Services - HallNet</a></li>
<li><a href="#">Council Tax Exemptions</a></li>
<li><a href="#">Cycling</a></li>
</ul>
<h3><a class="anchor" id="e"></a>E</h3>
<ul>
<li><a href="#">Exchanges and Study Abroad</a></li>
</ul>
<h3><a class="anchor" id="f"></a>F</h3>
<ul>
<li><a href="#">Facebook - Oxford Brookes University</a></li>
<li><a href="#">Finance - Financial Aid</a></li>
<li><a href="#">Finance - Student Finance</a></li>
<li><a href="#">Finance - Student Finance England</a></li>
<li><a href="#">Frequently Asked Questions (FAQs)</a></li>
</ul>
<h3><a class="anchor" id="h"></a>H</h3>
<ul>
<li><a href="#">HallNet</a></li>
<li><a href="#">Health - Dental</a></li>
<li><a href="#">Health - Disability Service</a></li>
<li><a href="#">Health - Dyslexia/SpLD Service</a></li>
<li><a href="#">Health - Medical Centre</a></li>
</ul>
<h3><a class="anchor" id="i"></a>I</h3>
<ul>
<li><a href="#">Induction Timetable</a></li>
<li><a href="#">International Student Advisory Team</a></li>
</ul>
<h3><a class="anchor" id="l"></a>L</h3>
<ul>
<li><a href="#">Library - Harcourt Hill</a></li>
<li><a href="#">Library - Headington</a></li>
<li><a href="#">Library - Home Page</a></li>
<li><a href="#">Library - Reading Lists</a></li>
<li><a href="#">Library - Teach Yourself How to Use the Library</a></li>
</ul>
- Do not link letters that have no links
- Each title should have an empty link with an anchor class i.e.
<h3><a class="anchor" id="a"></a>A</h3>
- Do not add a title to the link if the text for the link is the same
- Use the
.is-centered
class to centre a to z links
Use correct headings, for example, if the preceding heading is an h2
, use h3
for the anchor headings.