Footer
#
InstallationFor 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>
#
NPMnpm i @pearson-ux/footer --save
#
DemoImportant note The footer will stick to the bottom of the page when added to your application.
#
Light Footer<pearson-footer/>
#
Dark FooterImportant 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>
#
StructureTo add a footer, just add the markup in your app where you want it displayed, usually at the bottom of the page.
#
APIAll 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" />
#
EventsThere are no event that get emitted.
#
HTML MarkupDo 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.
<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>