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. 1.9)

Note

This page is archived under version 1.9 and is available for reference purposes only. The latest version of Pattern Library is 2.

Storytelling footer

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
Pattern files
  1. coc-storytelling-footer.css

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.

Previous Page name
Next Page name

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>