Footer

A Footer component is available that must be used on all current and future Royal Canin projects, websites and applications. The Footer component goes hand in hand with the Header component in giving us consistency throughout all projects and allows for familiarity for users visiting any and or all of the Royal Canin experiences available.

The Footer component is flexible and may be used with or without many of the features showcased below, as required on a per project basis. Elements expected to remain consistent within the Footer are the Back to top feature, Primary nav item links and Legal information. All other elements such as Secondary nav item links, Optional call to action links, Contact information, Country & Language selector icon with label button and Social channel are optional and may be used or not dependant on the type of project. On smaller devices if the project has secondary level pages that sit within a primary level section, a variation on the Accordion component is used to give quick access to these sections.

html
            <!-- Footer -->
<footer class="rc-bg-colour--interface-dark" id="footer">
  <div class="rc-max-width--lg rc-scroll--y">
    <div class="rc-layout-container rc-three-column rc-md-up">
      <div class="rc-column rc-triple-width">
        <nav class="rc-menubar">
          <ul class="rc-list rc-list--blank rc-list--inverse">
            <li class="rc-list__item">
              <a class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA
              </a>
            </li>
            <li class="rc-list__item">
              <a class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA
              </a>
            </li>
            <li class="rc-list__item">
              <a class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="rc-column rc-text--right">
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-up--xs rc-brand3" role="menuitem" href="#">Back to top</a>
      </div>
    </div>
    <div class="rc-divider rc-md-up"></div>
    <div class="rc-layout-container rc-one-column rc-padding-x--xs">
      <div class="rc-column rc-padding-x--xs">
        <nav data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" class="rc-padding-x--xs">
          <ul class="rc-list rc-list--five-column rc-list--blank rc-list--align rc-list--inverse" role="menubar">
            <li class="rc-list__item rc-list__item--group" role="none">
              <button class="rc-list__header" id="nav-footer-1" data-toggle="nav-footer-list-1" role="menuitem">Primary nav item</button>

              <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-list-1" aria-labelledby="nav-footer-1" role="menu">
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group" role="none">
              <button class="rc-list__header" id="nav-footer-2" data-toggle="nav-footer-list-2" role="menuitem">Primary nav item</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-list-2" aria-labelledby="nav-footer-2" role="menu">
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group" role="none">
              <button class="rc-list__header" id="nav-footer-3" data-toggle="nav-footer-list-3" role="menuitem">Primary nav item</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-list-3" aria-labelledby="nav-footer-3" role="menu">
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group" role="none">
              <button class="rc-list__header" id="nav-footer-4" data-toggle="nav-footer-list-4" role="menuitem">Primary nav item</button>

              <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-list-4" aria-labelledby="nav-footer-4" role="menu">
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
              </ul>
            </li>
            <li class="rc-list__item rc-list__item--group" role="none">
              <button class="rc-list__header" id="nav-footer-5" data-toggle="nav-footer-list-5" role="menuitem">Login</button>
              <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-list-5" aria-labelledby="nav-footer-5" role="menu">
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
                <li class="rc-list__item">
                  <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="rc-layout-container rc-one-column rc-md-down">
      <div class="rc-column rc-padding-x--none">
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA</a>
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA</a>
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" role="menuitem" href="#/">Optional CTA</a>
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-up--xs rc-brand3" role="menuitem" href="#">Back to top</a>
      </div>
    </div>
    <div class="rc-divider"></div>
    <div class="rc-layout-container rc-two-column rc-padding-x--xs">
      <div class="rc-column">
        <h1 class="rc-espilon rc-text--inverse">Contact Royal Canin</h1>
        <p class="rc-text--inverse">Monday to Friday from 8:30 am to 7 pm and Saturday from 9 am to 1 pm. Calls are free from a landline.</p>
      </div>
    </div>
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-mobile--xs rc-brand3" role="menuitem" href="#/">01132 456 789</a>
        <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-email--xs rc-brand3" role="menuitem" href="#/">Contact Us</a>
      </div>
      <div class="rc-column rc-text--right rc-padding-x--none">
        <button class="rc-btn rc-btn--inverse rc-btn--icon-label rc-flag rc-gb--xs" data-modal-trigger="country-lang-selector" role="menuitem" data-modal-active="true">United Kingdom</button>
      </div>
    </div>
  </div>
  <div class="rc-bg-colour--brand4">
    <div class="rc-max-width--lg rc-layout-container rc-two-column rc-padding-x--xs">
      <div class="rc-column rc-double-width rc-padding-x--none">
        <ul class="rc-list rc-list--align rc-list--blank rc-list--inline">
          <li class="rc-list__item">
            <a class="rc-list__link" href="/#">© Royal Canin SAS 2017</a>
          </li>
          <li class="rc-list__item">
            <a class="rc-list__link" href="#">Privacy Statement</a>
          </li>
          <li class="rc-list__item">
            <a class="rc-list__link" href="#">Legal</a>
          </li>
          <li class="rc-list__item">
            <a class="rc-list__link" href="#">Ad Choices</a>
          </li>
        </ul>
      </div>
      <div class="rc-column rc-text--right">
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" href="#/" aria-label="Facebook">
          <span class="rc-screen-reader-text">Facebook</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-twitter--xs" href="#/" aria-label="Twitter">
          <span class="rc-screen-reader-text">Twitter</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-youtube--xs" href="#/" aria-label="Youtube">
          <span class="rc-screen-reader-text">Youtube</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-instagram--xs" href="#/" aria-label="Facebook">
          <span class="rc-screen-reader-text">Instagram</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-pinterest--xs" href="#/" aria-label="Facebook">
          <span class="rc-screen-reader-text">Pinterest</span>
        </a>
      </div>
    </div>
  </div>
</footer>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 17th September 2018 [ui_assets/components/footer.yml]
    spelling and grammar updates
  • 14th September 2018 [ui_assets/components/footer.yml]
    Sync up footer markup
  • 11th September 2018 [ui_assets/components/footer.yml]
    Update footer
  • 11th September 2018 [ui_assets/components/footer.yml]
    Ensure footer markup is the same in all areas
  • 4th September 2018 [ui_assets/components/footer.yml]
    Chnage footer buttons menu markup
  • 21st August 2018 [ui_assets/components/footer.yml]
    Ensure html boilerplate and footer markup are the same
  • 21st August 2018 [ui_assets/components/footer.yml]
    YMl formatting
  • 21st August 2018 [ui_assets/components/footer.yml]
    Update spacer classes on footer
  • 20th August 2018 [ui_assets/components/footer.yml]
    Remove extra spacing from sub-footer
  • 26th July 2018 [ui_assets/components/footer.yml]
    Fix footer in the code snippet. Fix the broken cards page.
  • 26th July 2018 [ui_assets/components/footer.yml]
    Prefix footer in yml
  • 12th July 2018 [ui_assets/components/footer.yml]
    Update snippets.
  • 12th July 2018 [ui_assets/components/footer.yml]
    Prefixed classes throughout the portal with rc-.
  • 1st June 2018 [ui_assets/components/footer.yml]
    remove beta labels
  • 10th April 2018 [ui_assets/components/footer.yml]
    Copy and markup udpates and added new html boilerplate
  • 9th April 2018 [ui_assets/components/footer.yml]
    Footer copy update
  • 6th April 2018 [ui_assets/components/footer.yml]
    Standardised small, medium, large to sm, md, lg for consistency
  • 29th March 2018 [ui_assets/components/footer.yml]
    Added toggle effect type as data attribute
  • 28th March 2018 [ui_assets/components/footer.yml]
    Updated footer markup to use toggle-group
  • 28th March 2018 [ui_assets/components/footer.yml]
    Updated footer nav to use toggle group
  • 8th March 2018 [ui_assets/components/footer.yml]
    Adde beta badges
  • 8th March 2018 [ui_assets/components/footer.yml]
    Re-ordered nav items
  • 7th March 2018 [ui_assets/components/footer.yml]
    Made all example links into 'fake' links
  • 1st March 2018 [ui_assets/components/footer.yml]
    Improved presentation of the footer
  • 1st March 2018 [ui_assets/components/footer.yml]
    Added footer docs
  • 1st March 2018 [ui_assets/components/footer.yml]
    Footer markup & styled search items
  • 28th February 2018 [ui_assets/components/footer.yml]
    Have footer show on page
  • 28th February 2018 [ui_assets/components/footer.yml]
    Added footer markup
  • 12th December 2017 [ui_assets/components/footer.yml]
    Update colour classnames in code snippets (yml)
  • 6th December 2017 [ui_assets/components/footer.yml]
    Refinement for the new split navigation. Added classes for navigation links. Edited paths to suit new structure. Updated hard links in content.
  • 1st December 2017 [ui_assets/components/footer.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/components/footer.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 25th October 2017 [ui_assets/components/footer.yml]
    Disabled: Footer component items + stockist and product finder tools.
  • 24th October 2017 [ui_assets/components/footer.yml]
    Correct asset url.
  • 24th October 2017 [ui_assets/components/footer.yml]
    Remove redundant pages from output. Revert import link to cloudflare.
  • 16th October 2017 [ui_assets/components/footer.yml]
    Fixed missing logo - updated asset path
  • 27th September 2017 [ui_assets/components/footer.yml]
    Added blank page twig template. Abstracted twig page generation process so we can now add internal loops for page partials/full page components. Added option in content template to print button to empty page template. Added filter to create correct href url.
  • 5th September 2017 [ui_assets/components/footer.yml]
    Modal and shades page updates. Layout classes updates.
  • 31st August 2017 [ui_assets/components/footer.yml]
    Swapped svg/image to svg/objects so fix ios issue.
  • 29th August 2017 [ui_assets/components/footer.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 25th August 2017 [ui_assets/components/footer.yml]
    Added search input page. Improved inputs to conform to xhtml. Added shade page. Added footer sub-navigation page. Moved footer into navigation
  • 24th August 2017 [ui_assets/components/footer.yml]
    Added footer navigation page. https://trello.com/c/SbWwpgdq/300-add-footer-navigation-included-in-footer-card
  • 24th August 2017 [ui_assets/components/footer.yml]
    Added vertical navigation and moved horizontal + breadcrumbs into a navigation sub category.