Footer nav

Default footer nav

HTML


<nav class="orc-c-footer-nav" role="navigation">

  <ul class="orc-c-footer-nav__list">

    <li class="orc-c-footer-nav__item">
      <a href="&#x2F;patterns&#x2F;04-pages-15-gift-cards&#x2F;04-pages-15-gift-cards.rendered.html" class="orc-c-footer-nav__link">Gift Cards</a>
    </li>
    <!--end orc-c-footer-nav__item-->
    <li class="orc-c-footer-nav__item">
      <a href="#" class="orc-c-footer-nav__link">Careers</a>
    </li>
    <!--end orc-c-footer-nav__item-->
    <li class="orc-c-footer-nav__item">
      <a href="#" class="orc-c-footer-nav__link">Responsible Gaming</a>
    </li>
    <!--end orc-c-footer-nav__item-->
    <li class="orc-c-footer-nav__item">
      <a href="#" class="orc-c-footer-nav__link">Terms &amp; Conditions</a>
    </li>
    <!--end orc-c-footer-nav__item-->
    <li class="orc-c-footer-nav__item">
      <a href="link.pages-faq" class="orc-c-footer-nav__link">Privacy Policy</a>
    </li>
    <!--end orc-c-footer-nav__item-->

  </ul>
  <!--end orc-c-footer-nav__list-->

</nav>
<!--end orc-c-footer-nav-->

When to use

The footer nav is the very last row of links before users hit page bottom. This is where we surface terms and conditions, the privacy policy, career opportunities, and other low-priority items we must host somewhere.

When to consider an alternative

The footer nav coexists with the footer, which contains slightly more high-priority functional infomation. The footer is stacked overtop the footer nav.

Class Name	Description
`orc-c-footer-nav` Required	Apply to the footer nav’s containing `nav` tag. This helps to set up the base format of the footer navigation.
`orc-c-footer-nav__list` Required	Apply to the `ul` tag within the `orc-c-footer-nav`. This is set to `display: flex` on larger screens so that footer nav items sit side-by-side.
`orc-c-footer-nav__item` Required	Apply to each `li` tag within the footer nav list to represent the footer nav items.
`orc-c-footer-nav__link` Required	Apply to the `a` tag within each footer nav item to represent the footer nav link.

Default footer nav `orc-c-footer-nav`

Usage

When to use

When to consider an alternative