TACC UI Pattern Library

S Footer: Fat Footer

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.

  • With .s-footer__identity: s-footer link styles (inherit color, underline with color-mix) apply only to non-button links inside that wrapper.
  • Without any .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>
    More complex footers benefit from: <ul>
  <li>the <code>.s-footer--fat</code> modifier</li>
  <li>a <code>.s-footer__identity</code> child element</li>
</ul> But may require: <ul>
  <li>layout management <small>(e.g. Bootstrap classes, custom CSS)</small></li>
  <li>
    narrow screen overrides
    <small>(e.g. <a href="/components/raw/s-footer/demo.css" target="_blank">demo.css</a> restyles <code>.s-footer__identity</code>)</small>
  </li>
</ul>
  </p>
</main>
<footer class="
  s-footer
  s-footer--thick
  s-footer--fat
  row no-gutters pr-md-0
">
  <nav class="col col-auto col-lg-2
              mr-5 mb-lg-0">
    <h4>About</h4>
    <p>
      <a href="#">Mission</a><br>
      <a href="#">Contact</a><br>
      <a href="#">Staff</a><br>
    </p>
  </nav>
  <nav class="col col-auto col-lg-2
              mr-5 mb-lg-0">
    <h4>Services</h4>
    <p>
      <a href="#">Data</a><br>
      <a href="#">AI</a><br>
      <a href="#">HPC</a><br>
    </p>
  </nav>
  <nav class="col col-lg-2
              mr-5 mb-lg-0">
    <h4>Resources</h4>
    <p>
      <a href="#">Jobs</a><br>
      <a href="#">Tours</a><br>
      <a href="#">Security</a>
    </p>
    <hr>
    <a href="#" class="c-button c-button--primary">Help</a>
  </nav>
  <aside class="col col-12 col-md-4
                ml-md-auto
                s-footer__identity">
    <p>
      The <a href="https://www.tacc.utexas.edu/" target="_blank">Texas Advanced Computing Center</a> is part of the
      <a href="https://research.utexas.edu/" target="_blank">Office of the Vice President for Research</a> at
      <a href="https://www.utexas.edu/" target="_blank">The University of Texas at Austin</a>.
      Pack my red box with five dozen quality jugs. <a href="#">Inline link in prose</a>.
    </p>
  </aside>
</footer>
  • Content: 
    @media (width < 768px) {
  .s-footer--fat .s-footer__identity {
    background-color: unset;

    margin-top: 0;
    padding-inline: 0;
  }
}
  • URL: /components/raw/s-footer/demo.css
  • Filesystem Path: src/lib/_imports/trumps/s-footer/demo.css
  • Size: 142 Bytes 
{
  "shouldSkipPattern": true,
  "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": "thick",
  "weight": "fat",
  "hasIdentityColumn": true,
  "bodyContent": "More complex footers benefit from: <ul>\n  <li>the <code>.s-footer--fat</code> modifier</li>\n  <li>a <code>.s-footer__identity</code> child element</li>\n</ul> But may require: <ul>\n  <li>layout management <small>(e.g. Bootstrap classes, custom CSS)</small></li>\n  <li>\n    narrow screen overrides\n    <small>(e.g. <a href=\"/components/raw/s-footer/demo.css\" target=\"_blank\">demo.css</a> restyles <code>.s-footer__identity</code>)</small>\n  </li>\n</ul>",
  "shouldLoadCMS": true,
  "shouldLoadBootstrap": true
}