Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
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>