The website footer.
To stick footer at bottom of the page, use Sticky Footer.
.s-footer__identity (Fat Footer)When the footer contains multiple columns (for example a Bootstrap row / col grid), wrap the prose / org / legal column—the one that should match the same underlined link treatment as a simple footer—in an element with class s-footer__identity.
.s-footer__identity: s-footer link styles (inherit color, underline with color-mix) apply only to non-button links inside that wrapper..s-footer__identity in the footer: those link styles apply to all non-button links in the footer (simple footer).Column appearance (for example .col-muted, .col-dark) is separate; it does not replace .s-footer__identity.
From the medium breakpoint up (width >= 992px), .s-footer__identity also gets background-color: var(--global-color-primary--x-dark) so the prose column can read as a distinct panel (see live TACC footer).
See the Fat Footer variant in this pattern’s demo.
☞ Remember
Links are not underlined (if client loads
core-styles.base.css).
<main>
<p>
Thin footer has narrow horizontal padding. <em>You may need to reduce panel width to see this.</em>
</p>
</main>
<footer class="
s-footer
s-footer--thin
">
<p>
©2023
<a href="https://www.tacc.utexas.edu/" target="_blank">Texas Advanced Computing Center</a>,
<a href="https://www.utexas.edu/" target="_blank">The University of Texas at Austin</a>,
<a href="https://research.utexas.edu/" target="_blank">Office of the Vice President for Research</a>.
</p>
</footer>
@media (width < 768px) {
.s-footer--fat .s-footer__identity {
background-color: unset;
margin-top: 0;
padding-inline: 0;
}
}
{
"shouldSkipPattern": false,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"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": "trumps",
"shouldOmitMainTag": true,
"supportStyles": [
"../../assets/elements/sticky-footer.css"
],
"width": "thin",
"bodyContent": "Thin footer has narrow horizontal padding. <em>You may need to reduce panel width to see this.</em>"
}