Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
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.
<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 href="#" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3">Optional CTA </a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3">Optional CTA</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3">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" href="#" role="back to top">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--desktop rc-padding-x--none--mobile">
<ul class="rc-list rc-list--footer-columns rc-list--blank rc-list--align rc-list--inverse" role="menubar">
<li class="rc-list__item rc-list__item--group">
<button href="#" class="rc-list__header" role="menuitem" data-toggle="nav-footer-list-1" id="nav-footer-1">Primary nav item</button>
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-list-1" aria-labelledby="nav-footer-1">
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
</ul>
</li>
<li class="rc-list__item rc-list__item--group">
<button href="#" class="rc-list__header" role="menuitem" data-toggle="nav-footer-list-2" id="nav-footer-2">Primary nav item</button>
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-list-2" aria-labelledby="nav-footer-2">
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
</li>
</ul>
</li>
<li class="rc-list__item rc-list__item--group">
<button href="#" class="rc-list__header" role="menuitem" data-toggle="nav-footer-list-3" id="nav-footer-3">Primary nav item</button>
</li>
<li class="rc-list__item rc-list__item--group">
<button href="#" class="rc-list__header" role="menuitem" data-toggle="nav-footer-list-4" id="nav-footer-4">Primary nav item</button>
</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" href="#">Optional CTA </a>
<a class=" rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" href="#">Optional CTA</a>
<a class=" rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-food--xs rc-brand3" href="#">Optional CTA</a>
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-up--xs rc-brand3" href="#" role="back to top">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--desktop rc-padding-x--none--mobile rc-flex-direction--reverse--sm-down">
<div class="rc-column rc-double-width rc-padding-x--none">
<ol class="rc-list rc-list--align rc-list--blank rc-list--inline rc-text--center--sm-down">
<li class="rc-list__item">
<a href="https://www.royalcanin.com/us" class="rc-list__link">© Royal Canin SAS 2017</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link">Privacy Statement</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link">Legal</a>
</li>
<li class="rc-list__item">
<a href="#" class="rc-list__link">Ad Choices</a>
</li>
</ol>
</div>
</div>
</div>
</footer>Copied!