To pin website footer to the bottom of the page.
To style the footer, use S Footer.
<main>
<p>Sample body content. Footer is at bottom of page.</p>
</main>
<aside>
<p>Unexpected content.</p>
</aside>
<footer class="s-footer s-footer--thin">
<p>
Sample footer content.
</p>
</footer>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To style the footer, see trumps/s-footer.css */
aside {
text-align: center;
font-style: italic;
}
footer {
text-align: center;
background-color: var(--global-color-primary--light);
/* To make <p> margin space visible */
/* FAQ: A side with a border prevents margin collapse on that side */
border: var(--global-border--normal);
border-color: var(--global-color-primary--light);
}
{
"shouldSkipPattern": false,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "elements",
"shouldOmitMainTag": true
}