Skip to main content

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.

<pearson-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.

AttributeTypeDefaultDescription
accessibilitybooleanfalseShows accessibility link in footer
supportbooleanfalseShows support link in footer
themestringunsetSets 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>