Footer Element
Provides a responsive container for the native HTML footer element
PortfoLitO
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
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.
<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.
<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.
<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 |
|
|
--footer-borderColor | Top border color of the footer element |
|
|
--footer-borderColor-sm | Top border color of the footer element for small containers |
|
|
Slots
| Name | Description | Type |
|---|---|---|
| none | Contents of the page footer |
|
author | Page author shown after copyright |
|
attribution | Message and link to PortfoLitO |
|