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

Note

This page is archived under version 1.6 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 Google Translate and Foresee feedback

Code


<footer class="cui coc-footer cps-footer">
    <div class="footer-inner">
        <div id="google_translate_element" class="cui footer-section">
            <div class="skiptranslate goog-te-gadget" dir="ltr">
                <div id=":0.targetLanguage" class="targetLanguage">
                    <label for="translate-language">Select language</label>
                    <select class="goog-te-combo" id="translate-language" name="translate-language">
                        <option value="">Select Language</option>
                        <option value="af">Afrikaans</option>
                        <option value="sq">Albanian</option>
                        <option value="am">Amharic</option>
                    </select>
                </div>
                Powered by <span><a class="goog-logo-link" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" alt="Google">Translate</a></span>
            </div>
        </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">Quick links</h2>
                                <ul>
                                    <li><a href="http://www.calgary.ca/General/Pages/eServices.aspx">eServices</a></li>
                                    <li><a href="http://www.calgary.ca/General/Pages/Contact-Us.aspx">Contact Us</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-6">
                                <h2 class="h3">Login</h2>
                                <ul>
                                    <li><a href="http://www.calgary.ca/cfod/it/pages/employee-portal.aspx">Employee Portal</a></li>
                                    <li><a href="http://www.calgary.ca/cfod/it/Pages/myID-registration-instructions.aspx">myID</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h2 class="h3">Social</h2>
                        <ul class="two-col-xs">
                            <li><a href="https://twitter.com/cityofcalgary" target="_blank">Twitter</a></li>
                            <li><a href="https://www.facebook.com/TheCityofCalgary" target="_blank">Facebook</a></li>
                            <li><a href="https://www.youtube.com/c/thecityofcalgary" target="_blank">YouTube</a></li>
                            <li><a href="https://www.linkedin.com/company/city-of-calgary" target="_blank">Linkedin</a></li>
                            <li><a href="https://www.instagram.com/cityofcalgary/" target="_blank">Instagram</a></li>
                            <li><a href="https://www.flickr.com/photos/cityofcalgary/" target="_blank">Flickr</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="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Accessibility</a></li>
                <li><a href="#">Site Map</a></li>
                <li><a href="#">Search Tips</a></li>
            </ul>
        </div>
        <div class="footer-copyright">
            <p>&copy; 2017. All rights reserved. Official web site of The&nbsp;City&nbsp;of&nbsp;Calgary, located in Calgary, Alberta, Canada.</p>
        </div>
    </div>
</footer>

CPS Footer without Google Translate and Foresee feedback

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">Quick links</h2>
                        <ul>
                            <li><a href="http://www.calgary.ca/General/Pages/eServices.aspx">eServices</a></li>
                            <li><a href="http://www.calgary.ca/General/Pages/Contact-Us.aspx">Contact Us</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-md-6">
                        <h2 class="h3">Login</h2>
                        <ul>
                            <li><a href="http://www.calgary.ca/cfod/it/pages/employee-portal.aspx">Employee Portal</a></li>
                            <li><a href="http://www.calgary.ca/cfod/it/Pages/myID-registration-instructions.aspx">myID</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <h2 class="h3">Social</h2>
                <ul class="two-col-xs">
                    <li><a href="https://twitter.com/cityofcalgary" target="_blank">Twitter</a></li>
                    <li><a href="https://www.facebook.com/TheCityofCalgary" target="_blank">Facebook</a></li>
                    <li><a href="https://www.youtube.com/c/thecityofcalgary" target="_blank">YouTube</a></li>
                    <li><a href="https://www.linkedin.com/company/city-of-calgary" target="_blank">Linkedin</a></li>
                    <li><a href="https://www.instagram.com/cityofcalgary/" target="_blank">Instagram</a></li>
                    <li><a href="https://www.flickr.com/photos/cityofcalgary/" target="_blank">Flickr</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-links-horz footer-section">
            <ul>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Accessibility</a></li>
                <li><a href="#">Site Map</a></li>
                <li><a href="#">Search Tips</a></li>
            </ul>
        </div>
        <div class="footer-copyright">
            <p>&copy; 2017. All rights reserved. Official web site of The&nbsp;City&nbsp;of&nbsp;Calgary, located in Calgary, Alberta, Canada.</p>
        </div>
    </div>
</footer>