BETA This is a new service — your feedback will help us to improve it.

Back to components

Journey pages

Contents

Journey header

Example

Council house repairs

Report a repair

HTML Snippet for Journey Liheaderst

<p class="pre-title">
    Council house repairs
</p>
<h1 class="top">
    Report a repair
</h1>

Journey List

Ordered list

An ordered list should be used when the order of the items should be in a specific order.

Example

HTML Snippet for ordered List

<aside class="part-navigation__container" role="complementary">
    <nav class="part-navigation" role="navigation" aria-label="Pages in this guide">
        <ol class="list">
            <li>Report a repair</li>
            <li><a href="#">Emergency repairs</a></li>
            <li><a href="#">Your appointment</a></li>
        </ol>
    </nav>
</aside>

Unordered list

Unordered lists are used when the order of the items is not relevant.

Example

HTML Snippet for unordered list

<aside class="part-navigation__container" role="complementary">
    <nav class="part-navigation" role="navigation" aria-label="Pages in this guide">
        <ul class="list">
            <li>Report a repair</li>
            <li><a href="#">Emergency repairs</a></li>
            <li><a href="#">Your appointment</a></li>
        </ul>
    </nav>
</aside>

Journey List - Split test

Ordered list

An ordered list should be used when the order of the items should be in a specific order.

Example

HTML Snippet for Journey List split test

<aside class="part-navigation__container" role="complementary">
    <nav class="part-navigation part-navigation--a" role="navigation" aria-label="Pages in this guide">
        <ol class="list">
            <li>Report a repair</li>
            <li><a href="#">Emergency repairs</a></li>
            <li><a href="#">Your appointment</a></li>
        </ol>
    </nav>
</aside>

Unordered list

Unordered lists are used when the order of the items is not relevant.

Example

HTML Snippet for Journey List split test

<aside class="part-navigation__container" role="complementary">
    <nav class="part-navigation part-navigation--a" role="navigation" aria-label="Pages in this guide">
        <ul class="list">
            <li>Report a repair</li>
            <li><a href="#">Emergency repairs</a></li>
            <li><a href="#">Your appointment</a></li>
        </ul>
    </nav>
</aside>

Next / Previous

Example

HTML Snippet for Next / Previous

<nav class="pagination-nav" role="navigation" aria-label="Pagination">
    <ul>
        <li class="pagination-nav__previous-page">
            <a href="#" rel="prev">
                <span class="pagination-nav__part-title">Previous</span>
                <span class="pagination-nav__label">Report a repair</span>
            </a>
        </li>
        <li class="pagination-nav__next-page">
            <a href="#" rel="next">
                <span class="pagination-nav__part-title">Next</span>
                <span class="pagination-nav__label">Your appointment</span>
            </a>
        </li>
        <div style="clear: both;"></div>
    </ul>
</nav>
Leeds City Council logo

Copyright © Leeds City Council 2020

Back to top