1. Design System
  2. Components
  3. A-to-Z

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>

Usage

  • 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

Read the official Bulma documentation for pagination.

Accessibility

Use correct headings, for example, if the preceding heading is an h2, use h3 for the anchor headings.