Note |
This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.
Footer
Pattern files
Footers should be placed at the bottom of every page on the website or application. The links may be customized as required.
To configure the feedback button, contact measurements@calgary.ca to ask for the feedback code, scripts, and instructions.
Basic footer
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div class="footer-links-horz footer-section">
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="text-center footer-section">
<a href="http://www.calgary.ca/" class="text-larger">Learn more about The City of Calgary at calgary.ca</a>
</div>
<div class="footer-copyright">
<p>© {{ Current year (e.g. 2019) }}. All rights reserved.</p>
</div>
</div>
</footer>Basic footer with feedback area
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div class="row justify-content-center footer-section">
<div class="col-sm-10 col-md-9 col-lg-7">
<div class="feedback">
<div class="row">
<div class="col-md-7">
<p>{{ Content }}</p>
<p>{{ Content }}</p>
</div>
<div class="col-md-5">
<button class="cui btn-md primary">{{ The name of the button }}</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer-links-horz footer-section">
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="text-center footer-section">
<a href="http://www.calgary.ca/" class="text-larger">Learn more about The City of Calgary at calgary.ca</a>
</div>
<div class="footer-copyright">
<p>© {{ Current year (e.g. 2019) }}. All rights reserved.</p>
</div>
</div>
</footer>Footer with links
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div class="footer-links-vert footer-section row">
<div class="col-md-8">
<div class="row">
<div class="col-6 col-md-6">
<h2 class="h3">{{ Heading }}</h2>
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="col-6 col-md-6">
<h2 class="h3">{{ Heading }}</h2>
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="h3">{{ Heading }}</h2>
<ul class="two-col-xs">
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
</div>
<div class="footer-links-horz footer-section">
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>© {{ Current year (e.g. 2019) }}. All rights reserved.</p>
</div>
</div>
</footer>Footer with links, Google Translate, and feedback area
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div id="google_translate_element" class="cui footer-section">
{{ Google Translate code }}
</div>
<div class="footer-links-vert footer-section row">
<div class="col-md-6">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-6 col-md-6">
<h2 class="h3">{{ Heading }}</h2>
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="col-6 col-md-6">
<h2 class="h3">{{ Heading }}</h2>
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="h3">{{ Heading }}</h2>
<ul class="two-col-xs">
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feedback">
<div class="row">
<div class="col-lg-7">
<p>Tell us how to make this page better.</p>
<p>This should only take a minute.</p>
</div>
<div class="col-lg-5">
<button class="cui btn-md primary">Give feedback</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer-links-horz footer-section">
<ul>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
<li><a href="{{ URL }}">{{ Link text }}</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>© {{ Current year (e.g. 2019) }}. All rights reserved.</p>
</div>
</div>
</footer>