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.

Select layout

Previous Lorem ipsum dolor sit amet, consectetur adipiscing elit

Next Lorem ipsum dolor consectetur adipiscing

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>