Appearance
Footer Element
Provides a responsive container for the native HTML footer element
Usage
Basic Usage
The <page-footer> element wraps the native HTML <footer> element, and is intended to be the last child of the <body> element of a page. It automatically includes a copyright for the current year, and an attribution link to PortfoLitO.
html
<body>
<page-main>
<!-- Your Content -->
</page-main>
<page-footer>
<a href="#top">Back To Top</a>
</page-footer>
</body>With Author Name
An author slot is included such that the name of the copyright holder for a page can be displayed alongside the copyright year.
html
<page-footer>
<span slot="author">Bob Loblaw</span>
</page-footer>Without Attribution
Using the attribution slot, it's possible to replace the PortfoLitO attribution link with arbitrary content.
html
<page-footer>
<a slot="attribution" href="#top">Back To Top</a>
</page-footer>CSS Parts
| Name | Description |
|---|---|
container | Native HTML footer element |
copyright | Copyright year and page author container |
content | Wrapper for other page footer content |
CSS Variables
| Name | Description | Type | Default |
|---|---|---|---|
--footer-bgColor | Background color of the footer element | color |
|
--footer-borderColor | Top border color of the footer element | color |
|
--footer-borderColor-sm | Top border color of the footer element for small containers | color |
|
Slots
| Name | Description | Type |
|---|---|---|
| none | Contents of the page footer | * |
author | Page author shown after copyright | <span> |
attribution | Message and link to PortfoLitO | <span> |