Footer

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/footer"></script>

NPM

npm i @pearson-ux/footer --save

Demo

Important note The footer will stick to the bottom of the page when added to your application.

Light Footer

<pearson-footer/>

Dark Footer

Important Note Make sure you wrap the dark theme footer in a div with a background color, position:absolute, width:100%, bottom:0 and a height of your choosing.

<div style="height:100px; background:#047A9C; bottom:0; position:fixed; width:100%">

<pearson-footer theme="dark" />

</div>

Structure

To add a footer, just add the markup in your app where you want it displayed, usually at the bottom of the page.

API

All attributes in this API are optional.

Important note Links that are added through these attributes have hard coded href's that navigate to the correct location.

Attribute	Type	Default	Description
accessibility	boolean	false	Shows accessibility link in footer
support	boolean	false	Shows support link in footer
theme	string	unset	Sets the theme of the footer. Accepted values: 'dark'.

<pearson-footer support accessibility theme="dark" />

Events

There are no event that get emitted.

HTML Markup

Do you want to build out a custom footer? No problem, use the markup below along with CSS to make your own footer that follows the UXF specification.

Important note: You can follow the UXF guidelines to view the suggested functionality of the footer.

Here are some basic practices to make sure the footer you build is accessible.

<footer class="light">

<ul class="links">

<li><a href="#">Terms of Use</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">Accessibility</a></li>

<li><a href="#">Permissions</a></li>

<li><a href="#">Support</a></li>

</ul>

<p class="copyright"></p>

</footer>