# Footer

## Overview

The footer component provides a page-level content info region for site ownership and closing legal or utility content.

Like the header, the footer is built as a semantic contract around native HTML instead of a legacy class tree.

For exact styles, use [footer.css](/Users/stuft2/Projects/design-tokens/src/css/footer.css) as the source of truth.

## When to use

Use the footer once per page for BYU branding, ownership, legal metadata, and optional contact or structured secondary links.

## When not to use

Do not use the footer for primary navigation, page-specific content, or the page's main actions.

## Usage

Sticky-footer behavior is a page-shell concern, not a footer variant. The shared layout baseline now handles that automatically for the standard page contract:

```html
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
```

Minimal footer:

```html
<footer>
  <a href="https://www.byu.edu/" aria-label="Brigham Young University home page">
    Brigham Young University
  </a>
  <p>
    <span>Provo, UT 84602, USA</span>
    <span>2026 © All Rights Reserved</span>
  </p>
  <nav aria-label="Legal links">
    <ul>
      <li><a href="#">Privacy Notice</a></li>
      <li><a href="#">Cookie Preferences</a></li>
    </ul>
  </nav>
</footer>
```

Enhanced footer with site-info band and layout utilities:

```html
<footer>
  <section class="grid">
    <section aria-labelledby="footer-contact-title">
      <h3 id="footer-contact-title">Contact</h3>
      <address>
        <p>BYU Speeches</p>
        <p>701 East University Parkway</p>
        <p>Provo, Utah 84602</p>
        <p><a href="tel:18888888888">888-888-8888</a></p>
      </address>
    </section>

    <section aria-labelledby="footer-related-title">
      <h3 id="footer-related-title">Related Links</h3>
      <nav aria-labelledby="footer-related-title">
        <ul>
          <li><a href="#">Give to Speeches</a></li>
          <li><a href="#">BYU Alumni</a></li>
          <li><a href="#">BYU Magazine</a></li>
        </ul>
        </nav>
    </section>

    <section aria-labelledby="footer-connect-title">
      <h3 id="footer-connect-title">Connect</h3>
      <nav aria-labelledby="footer-connect-title">
        <ul>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Follow BYU Speeches</a></li>
        </ul>
        </nav>
    </section>
  </section>

  <section>
    <a href="https://www.byu.edu/" aria-label="Brigham Young University home page">
      Brigham Young University
    </a>
    <p>
      <span>Provo, UT 84602, USA</span>
      <span>2026 © All Rights Reserved</span>
    </p>
    <nav aria-label="Legal links">
      <ul>
        <li><a href="#">Privacy Notice</a></li>
        <li><a href="#">Cookie Preferences</a></li>
      </ul>
    </nav>
  </section>
</footer>
```

Use this component when a page needs a clear page footer with BYU branding and compact legal metadata. Add the optional site-info band when the footer also needs contact information or structured link groups.

## Variants

Social media links belong in the optional theme-aware site-info band when a site needs a compact "follow us" section.

Use semantic navigation and keep the accessible name on each icon-only link:

```html
<footer>
  <section class="grid">
    <section aria-labelledby="footer-social-title">
      <h3 id="footer-social-title">Follow</h3>
      <nav aria-labelledby="footer-social-title">
        <ul class="cluster">
          <li>
            <a href="https://www.youtube.com/byu" aria-label="BYU on YouTube">
              <span class="icon" aria-hidden="true">smart_display</span>
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/byu" aria-label="BYU on Instagram">
              <span class="icon" aria-hidden="true">photo_camera</span>
            </a>
          </li>
          <li>
            <a href="https://www.facebook.com/byu" aria-label="BYU on Facebook">
              <span class="icon" aria-hidden="true">thumb_up</span>
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/school/brigham-young-university/" aria-label="BYU on LinkedIn">
              <span class="icon" aria-hidden="true">business_center</span>
            </a>
          </li>
        </ul>
        </nav>
    </section>
  </section>

  <section>
    <a href="https://www.byu.edu/" aria-label="Brigham Young University home page">
      Brigham Young University
    </a>
    <p>
      <span>Provo, UT 84602, USA</span>
      <span>2026 © All Rights Reserved</span>
    </p>
    <nav aria-label="Legal links">
      <ul>
        <li><a href="#">Privacy Notice</a></li>
        <li><a href="#">Cookie Preferences</a></li>
      </ul>
    </nav>
  </section>
</footer>
```

## Behavior

Covered by [Playwright behavior tests](../../tests/e2e/data-branding-tokens.spec.js).

- FTR-001: The component styles the last top-level `<footer>` in `body` and any internal `<footer class="footer">` instance used for demos or tests.
- FTR-002: The minimal contract keeps the BYU link, address line, and legal links centered in one vertical stack across breakpoints.
- FTR-003: The enhanced contract uses one page footer with a theme-aware subtle site-info section above the blue legal section.
- FTR-004: Each site-info navigation group is wrapped in a section element so the column has a semantic block around its heading and navigation.
- FTR-005: The site-info section is layout-neutral; choose shared layout utilities such as `grid` and `cluster` on the content you place there.
- FTR-006: Social media links can live in that site-info section with `cluster` or another appropriate layout utility.
- FTR-007: The minimal contract expects the BYU home link first, followed by direct child legal copy and utility navigation.
- FTR-008: In the enhanced contract, the second section uses that same legal footer structure internally.
- FTR-009: Sticky-footer behavior comes from the surrounding page shell rather than from the footer component itself, and the default layout stylesheet now provides that shell behavior for standard pages.
- FTR-010: When the footer is a direct child of `body`, it fills the body's flush inline width without negative margins or compensating width expansion.
- FTR-011: The branded footer uses BYU navy (`#002e5d`) by default in every color theme while allowing authors to override `--footer-background`.
## Accessibility

- Use a native top-level `<footer>` for real page-level content info and do not add a redundant `role="contentinfo"`.
- Keep the optional theme-aware site-info band inside the same footer instead of creating a second page-level footer.
- Use `address` only for real contact or ownership details.
- Keep footer navigation links short and task-oriented.
- Give icon-only social links an accessible name on the link itself and mark the icon glyph as decorative.
- Prefer text links for branding and ownership copy instead of hiding those labels in images.
- See MDN's [ARIA: contentinfo role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/contentinfo_role) for the landmark semantics and usage constraints.

## Migration Notes

Compared with the BYU footer web component, this footer now supports the minimal blue legal footer, the enhanced two-band footer with a theme-aware site-info band, utility-driven site-info layouts, documented social-link content in that band, and sticky-footer page-shell guidance.

The main documented gaps are:

- Double-width and triple-width column variants are not part of the current public contract.
- The site-info band expects semantic content, while layout choices come from shared layout utilities instead of footer-specific column variants.

When migrating from the BYU footer component, this footer now covers the core institutional/legal footer, the optional site-info band, a documented social-link treatment, utility-driven column layouts, and sticky-footer layout guidance.

## Variables

| Variable | Type | Description |
| --- | --- | --- |
| `--footer-background` | `<color>` | Sets the main footer background; change it when the global footer needs a different brand or contrast surface. |
| `--footer-border-color` | `<color>` | Sets the top border color for the main footer; change it when the footer needs more or less separation from page content. |
| `--footer-brand-link-size` | `<length>` | Sets the font size for prominent brand links in the footer; change it when institutional links should carry more or less hierarchy. |
| `--footer-color-border-subtle` | `<color>` | Sets --footer-color-border-subtle so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-color-primary-strong` | `<color>` | Sets --footer-color-primary-strong so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-color-text` | `<color>` | Sets --footer-color-text so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-color-text-accent` | `<color>` | Sets --footer-color-text-accent so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-color-text-accent-inverse` | `<color>` | Sets --footer-color-text-accent-inverse so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-control-border-width` | `<length>` | Sets --footer-control-border-width so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-font-weight-body-bold` | `<number>` | Sets --footer-font-weight-body-bold so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-font-weight-body-regular` | `<number>` | Sets --footer-font-weight-body-regular so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-landmark-padding-block` | `<length>` | Sets --footer-landmark-padding-block so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-legal-size` | `<length>` | Sets the font size for legal and secondary footer text; change it when compliance copy needs to be more legible or more subdued. |
| `--footer-link-color` | `<color>` | Sets the default link color in the main footer; change it when footer links need a different contrast treatment on the footer background. |
| `--footer-link-hover-color` | `<color>` | Sets the hover color for main footer links; change it when interactive footer links need a stronger focus or hover cue. |
| `--footer-page-min-inline-size` | `<length>` | Sets --footer-page-min-inline-size so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-site-background` | `<color>` | Sets the background for the lower site-footer band; change it when secondary footer content should sit on a different surface. |
| `--footer-site-link-color` | `<color>` | Sets the link color in the lower site-footer band; change it to keep links accessible against the site-footer background. |
| `--footer-site-text-color` | `<color>` | Sets the text color in the lower site-footer band; change it when that band uses a different surface or contrast level. |
| `--footer-space-inline` | `<length>` | Sets --footer-space-inline so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--footer-text-color` | `<color>` | Sets the default text color in the main footer; change it when the footer background changes or copy needs different emphasis. |

## Depends On

- `--color-accent-subtle`
- `--color-border-inverse`
- `--color-border-subtle`
- `--color-primary-strong`
- `--color-text`
- `--color-text-accent`
- `--color-text-accent-inverse`
- `--color-text-inverse`
- `--font-size`
- `--font-size-caption`
- `--font-weight-body-bold`
- `--font-weight-body-regular`
- `--layout-control-border-width`
- `--layout-landmark-padding-block`
- `--layout-page-min-inline-size`
- `--layout-space-inline`