Pattern Library (ver. 1.9)

Storytelling footer

The storytelling footer is intended to be used on pages that tell information (or a story) over multiple pages that should ideally be read in order. The page names serve to provide additional context to the previous and next pages. See example on calgary.ca.

Code


<div class="cui story-footer">
    <div class="row">
        <div class="col-6 col-prev">
            <a href="{{ URL }}" class="cui btn-md utility-btn-solid"><span class="cicon-angle-left left" aria-hidden="true"></span>Previous</a>
            <span class="text-label">{{ Page name }}</span>
        </div>
        <div class="col-6 col-next">
            <a href="{{ URL }}" class="cui btn-md utility-btn-solid">Next<span class="cicon-angle-right right" aria-hidden="true"></span></a>
            <span class="text-label">{{ Page name }}</span>
        </div>
    </div>
</div>