Design System

British Columbia Government Design System for Digital Services


Last Updated: February 11, 2019

Footer - Basic

Footers help people find what they need after scrolling to the bottom of a web page. They provide supplementary information such as copyright, contact information, social media links, and links to other pages within a website.




  • This footer must appear on all public-facing online B.C. Government content and services.

Footer Links:

  • “Home” returns to home page of your service
  • Disclaimer, Privacy, Accessibility, and Copyright links should all be to the core government statements with any addendums being vetted by ministry or central legal advisors before being released.
  • “Contact Us” provides contact details for service area or program.

Mobile Design

  • All footer links should stack on one another


This component has been built according to WCAG 2.0 AA standards and all government services should strive to meet this level. This component successfully includes the following accessibility features:


As read using ChromeVox

"Footer List with six (6) items."

"Home. Link list item."

"Disclaimer. Link list item."

"Privacy. Link list item."

"Accessibility. Link list item."

"Copyright. Link list item."

"Contact Us. Link list item."

Conveying Information

  • Links underlined on hover to indicate they are clickable



<body style="display: flex; flex-direction: column; height: 100vh;">
  <div style="flex: 1 0 auto; padding: 20px;">
    <h1>Sample Footer</h1>
  <footer class="footer">
    <div class="container">
      <li><a href=".">Home</a></li>
      <li><a href=".">Disclaimer</a></li>
      <li><a href=".">Privacy</a></li>
      <li><a href=".">Accessibility</a></li>
      <li><a href=".">Copyright</a></li>
      <li><a href=".">Contact Us</a></li>


footer {
  background-color: #036;
  border-top: 2px solid #fcba19;
  color: #fff;
  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif; 

footer .container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 46px;

footer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  color: #fff;
  list-style: none;
  align-items: center;
  height: 100%;

footer ul li a {
  font-size: 0.813em;
  font-weight: normal;  /* 400 */
  color: #fff;
  border-right: 1px solid #4b5e7e;
  padding-left: 5px;
  padding-right: 5px;

a:hover {
  color: #fff;
  text-decoration: underline;

:focus {
  outline: 4px solid #3B99FC;
  outline-offset: 1px;
  • Create an Issue

Design System

  • home
  • disclaimer
  • privacy
  • accessibility
  • copyright
  • contact us
  • Government Of BC