Note |
This page is archived under version 1.7 and is available for reference purposes only. The latest version of Pattern Library is 2.
CPS footer
The CPS version of the footer may only be used on the CPS website.
CPS Footer with links
Code
<footer class="cui coc-footer cps-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 }}" target="_blank">{{ Link text }}</a></li>
<li><a href="{{ URL }}" target="_blank">{{ 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>
CPS footer with links, Google Translate, and feedback area
Code
<footer class="cui coc-footer cps-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 }}" target="_blank">{{ Link text }}</a></li>
<li><a href="{{ URL }}" target="_blank">{{ 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>