Pelican Design System
Footer
Footer
Footers contain links and other useful information at the bottom of a page.
On this page:
Best Practices
- Use the Basic Footer if the product only needs a few links.
- Use the Utility Footer is the product needs more advanced features.
Usage
Basic Footer
<footer class="footer footer-basic">
<div class="container-fluid">
<div class="links-wrapper" role="navigation"aria-label="Footer navigation" >
<a class="btn btn-link" href="Account">Home</a>
<a class="btn btn-link" href="MoreInfo">More Info</a>
<a class="btn btn-link" href="Privacy">Privacy</a>
</div>
</div>
</footer>
Utility Footer
<footer class="footer footer-utility">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="brand-link" href="index.html">
<div class="brand-logo"><svg id="c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2562.7 1024"><defs><style>.d{fill:#fff;}</style><symbol id="a" viewBox="0 0 165.23 59.2"><g><path class="d" d="M30.67,59.2c-4.32,0-8.34-.75-12.05-2.25-3.72-1.5-6.97-3.61-9.76-6.31-2.79-2.71-4.96-5.85-6.52-9.43-1.56-3.58-2.34-7.45-2.34-11.6s.78-8.02,2.34-11.6c1.56-3.58,3.73-6.72,6.52-9.43,2.79-2.71,6.04-4.81,9.76-6.31,3.72-1.5,7.73-2.25,12.05-2.25s8.34,.75,12.05,2.25c3.72,1.5,6.97,3.61,9.76,6.31,2.79,2.71,4.96,5.85,6.52,9.43,1.56,3.58,2.34,7.45,2.34,11.6s-.78,8.02-2.34,11.6c-1.56,3.58-3.73,6.72-6.52,9.43-2.79,2.71-6.04,4.81-9.76,6.31-3.72,1.5-7.74,2.25-12.05,2.25Zm0-12.96c2.3,0,4.43-.42,6.4-1.27,1.97-.85,3.68-2.01,5.12-3.48,1.45-1.48,2.58-3.24,3.4-5.29,.82-2.05,1.23-4.25,1.23-6.6s-.41-4.62-1.23-6.64-1.96-3.77-3.4-5.25c-1.45-1.48-3.16-2.64-5.12-3.49-1.97-.85-4.1-1.27-6.4-1.27s-4.43,.42-6.4,1.27c-1.97,.85-3.68,2.01-5.12,3.49-1.45,1.48-2.58,3.23-3.4,5.25-.82,2.02-1.23,4.21-1.23,6.56s.41,4.63,1.23,6.68c.82,2.05,1.95,3.81,3.4,5.29,1.45,1.48,3.16,2.64,5.12,3.48,1.97,.85,4.1,1.27,6.4,1.27Z"/><path class="d" d="M79.79,58.3V13.37h-18.78V.9h51.66V13.37h-18.78V58.3h-14.1Z"/><path class="d" d="M140.05,59.12c-4.65,0-9.24-.85-13.78-2.54-4.54-1.69-8.58-4.04-12.14-7.05l7.87-10.25c3.5,2.84,6.72,4.88,9.68,6.11,2.95,1.23,6.09,1.84,9.43,1.84,2.19,0,4.04-.22,5.58-.66,1.53-.44,2.71-1.08,3.53-1.93,.82-.85,1.23-1.84,1.23-2.99,0-1.58-.6-2.81-1.8-3.69-1.2-.87-3.25-1.56-6.15-2.05l-12.63-2.21c-4.65-.82-8.23-2.6-10.74-5.33-2.52-2.73-3.77-6.2-3.77-10.41,0-3.72,.94-6.92,2.83-9.59,1.89-2.68,4.59-4.73,8.12-6.15,3.53-1.42,7.72-2.13,12.59-2.13,4.26,0,8.55,.72,12.87,2.17,4.32,1.45,8.06,3.46,11.23,6.03l-7.46,10.41c-5.9-4.54-11.78-6.81-17.63-6.81-1.91,0-3.57,.21-4.96,.62-1.39,.41-2.46,.98-3.2,1.72-.74,.74-1.11,1.63-1.11,2.67,0,1.42,.53,2.52,1.6,3.28,1.07,.77,2.8,1.37,5.21,1.8l11.89,1.97c5.52,.88,9.72,2.71,12.59,5.49s4.3,6.4,4.3,10.82c0,3.88-1.01,7.23-3.03,10.04-2.02,2.82-4.92,4.99-8.69,6.52-3.77,1.53-8.26,2.3-13.45,2.3Z"/></g></symbol><symbol id="b" viewBox="0 0 209.93 203.52"><path class="d" d="M208.76,189.11l-9.77-9.77c-.28-.28-.6-.52-.95-.7l-7.13-3.78c-2.16-1.14-2.79-3.94-1.33-5.9l4.28-5.73c.51-.69,.79-1.52,.79-2.38v-14.06c0-.67-.17-1.32-.48-1.9l-14.03-25.77c-.52-.96-.63-2.09-.29-3.12l3.25-10.1c.83-2.57-1.09-5.2-3.79-5.2H113.56c-2.88,0-4.81-2.96-3.64-5.59l17.19-38.9c.22-.51,.34-1.06,.34-1.61V3.98c0-2.2-1.78-3.98-3.98-3.98H3.98C1.78,0,0,1.78,0,3.98V54.73c0,.46,.08,.92,.24,1.35l15.65,43.52c.26,.71,.3,1.49,.14,2.23L1.62,165.49c-.3,1.34,.1,2.74,1.08,3.7l5.29,5.25c.75,.74,1.75,1.16,2.81,1.16H87.73c.59,0,1.18,.13,1.71,.39l5.35,2.55c1.19,.57,2.59,.51,3.73-.16l2.35-1.38c1.16-.68,2.57-.73,3.78-.14l4.17,2.06c1.36,.67,2.22,2.05,2.22,3.57v1.28c0,1.54,.88,2.93,2.27,3.59l19.24,9.17c.53,.25,1.12,.39,1.71,.39h9.45c1.42,0,2.74-.76,3.45-1.99l.37-.65c.71-1.23,2.03-1.99,3.45-1.99h2.29c1.06,0,2.07,.42,2.82,1.17l1.94,1.94c.75,.75,1.76,1.17,2.82,1.17h7.13c1.21,0,2.35-.55,3.11-1.49l1.11-1.39c.76-.94,1.9-1.49,3.11-1.49h5.69c.88,0,1.74,.29,2.44,.83l12.47,9.66c1.58,1.23,3.83,1.08,5.25-.33l7.61-7.61c1.56-1.56,1.56-4.08,0-5.63Zm-38.1-16.31c-4.03,0-7.3-3.27-7.3-7.3,0-.94,.18-1.83,.51-2.66l-44.75-34.06c-1.05,1.01-2.26,1.85-3.59,2.47l8.6,29.06c3.92,.12,7.07,3.33,7.07,7.29s-3.27,7.3-7.3,7.3-7.3-3.27-7.3-7.3c0-2.7,1.47-5.05,3.65-6.31l-8.56-28.9c-.59,.08-1.19,.14-1.81,.14-2.72,0-5.26-.82-7.36-2.23l-19.16,21.04c.69,1.12,1.1,2.43,1.1,3.84,0,4.03-3.27,7.3-7.3,7.3s-7.3-3.27-7.3-7.3,3.27-7.3,7.3-7.3c1.17,0,2.27,.28,3.24,.77l19.16-21.04c-.71-.87-1.3-1.83-1.77-2.87l-62.47,17.65c0,4.02-3.27,7.28-7.3,7.28s-7.3-3.27-7.3-7.3,3.27-7.3,7.3-7.3c2.62,0,4.92,1.39,6.2,3.47l62.48-17.65c-.07-.54-.11-1.09-.11-1.64,0-.51,.04-1.01,.09-1.51l-39.59-10.75c-1.28,2.11-3.59,3.53-6.24,3.53-4.03,0-7.3-3.27-7.3-7.3s3.27-7.3,7.3-7.3,7.25,3.22,7.29,7.21l39.59,10.75c.38-.87,.86-1.68,1.42-2.44L20.88,33.92c-1.06,.6-2.28,.94-3.58,.94-4.03,0-7.3-3.27-7.3-7.3s3.27-7.3,7.3-7.3,7.3,3.27,7.3,7.3c0,1.28-.33,2.47-.9,3.52L101.97,108.6c.26-.19,.52-.38,.8-.55L66.45,25.54c-.33,.04-.66,.08-.99,.08-4.03,0-7.3-3.27-7.3-7.3s3.27-7.3,7.3-7.3,7.3,3.27,7.3,7.3c0,2.26-1.03,4.28-2.64,5.62l36.32,82.5c1.1-.3,2.26-.47,3.46-.47,6.65,0,12.15,4.9,13.12,11.28h29.6c.87-3.06,3.68-5.3,7.02-5.3,4.03,0,7.3,3.27,7.3,7.3s-3.27,7.3-7.3,7.3c-3.34,0-6.14-2.24-7.02-5.3h-29.6c-.24,1.56-.73,3.03-1.46,4.36l44.75,34.06c1.22-.91,2.73-1.46,4.37-1.46,4.03,0,7.3,3.27,7.3,7.3s-3.27,7.3-7.3,7.3Z"/></symbol></defs><use width="209.93" height="203.52" transform="translate(105.18 105.35) scale(3.99)" xlink:href="#b"/><use width="165.23" height="59.2" transform="translate(943.52 271.86) scale(9.15)" xlink:href="#a"/></svg>
</div>
</a>
</div>
</div>
<hr class="major">
<div class="row align-items-center">
<div class="col-12 col-md-6 text-center text-md-left">
<a href="internal.html" class="btn btn-secondary">
<span class="fas fa-envelope mr-1" aria-hidden="true"></span>Email Us
</a>
<a href="internal.html" class="btn btn-secondary">
<span class="fas fa-phone mr-1" aria-hidden="true"></span>Call Us
</a>
</div>
<div class="col-12 col-md-6 text-center text-md-right">
<p class="lead mb-0">
<a href="internal.html" class="btn btn-link">
<span class="fab fa-facebook-square fa-2x" aria-hidden="true"></span>
<span class="sr-only">Find us on Facebook</span>
</a>
<a href="internal.html" class="btn btn-link">
<span class="fab fa-twitter-square fa-2x" aria-hidden="true"></span>
<span class="sr-only">Find us on Twitter</span>
</a>
<a href="internal.html" class="btn btn-link">
<span class="fab fa-linkedin fa-2x" aria-hidden="true"></span>
<span class="sr-only">find us on LinkedIn</span>
</a>
</p>
</div>
</div>
<hr class="major">
<div class="row">
<div class="col-12">
<a href="https://github.com/la-ots/pelican" class="btn btn-link">Design System</a>
</a>
<a href="https://www.doa.la.gov/Pages/ots/Index.aspx" class="btn btn-link">OTS</a>
</a>
<a href="https://gov.louisiana.gov" class="btn btn-link">Louisiana.gov</a>
</a>
</div>
</div>
<hr class="major">
</div>
</footer>