Pattern Library (ver. 2)

Linear navigation footer

The linear navigation footer is intended to be used on pages that tell information 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-12 col-md-6 | 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>
            	<!--Optional page title-->
            	<span class="text-label">{{ Page name }}</span>
        </div>
        <div class="{{ col-12 col-md-6 | 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>
	            <!--Optional label-->
	            <span class="text-label">{{ Page name }}</span>
        </div>
    </div>
</div>