University footer

WayneUI's own full university footer: a wordmark, an address, grouped links and the legal links a public site is expected to carry, styled on the design system's own tokens.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<footer class="wsu-university-footer">
  <div class="wsu-university-footer__inner">
    <div class="wsu-university-footer__top">
      <div>
        <a class="wsu-university-footer__mark" href="https://wayne.edu/">
          <img src="/assets/wayne-ui/marks/wsu-wordmark-reverse.svg" alt="Wayne State University" width="605" height="65">
        </a>
        <address class="wsu-university-footer__address">5057 Woodward Avenue<br>Detroit, MI 48202</address>
      </div>
      <div>
        <p class="wsu-university-footer__heading" id="uf-about">About</p>
        <ul class="wsu-university-footer__list" aria-labelledby="uf-about">
          <li><a href="https://wayne.edu/about/">About Wayne State</a></li>
          <li><a href="https://academica.aws.wayne.edu/">Academica</a></li>
        </ul>
      </div>
    </div>
    <div class="wsu-university-footer__bottom">
      <ul class="wsu-university-footer__legal">
        <li><a href="https://wayne.edu/accessibility/">Accessibility</a></li>
        <li><a href="https://wayne.edu/policies">Privacy and University Policies</a></li>
      </ul>
      <p class="wsu-university-footer__copyright">&copy; 2026 Wayne State University</p>
    </div>
  </div>
</footer>

<x-wsu::university-footer variant="native"
    :address="['5057 Woodward Avenue', 'Detroit, MI 48202']"
    :columns="[
        ['heading' => 'About', 'links' => [
            ['label' => 'About Wayne State', 'url' => 'https://wayne.edu/about/'],
            ['label' => 'Academica', 'url' => 'https://academica.aws.wayne.edu/'],
        ]],
    ]" />

<UniversityFooter
  mark="/assets/wayne-ui/marks/wsu-wordmark-reverse.svg"
  :address="['5057 Woodward Avenue', 'Detroit, MI 48202']"
  :columns="[
    { heading: 'About', links: [
      { label: 'About Wayne State', href: 'https://wayne.edu/about/' },
      { label: 'Academica', href: 'https://academica.aws.wayne.edu/' },
    ] },
  ]"
/>

Why it works this way

1.x had a toggle to overlay the official wayne.edu masthead, but its own footer was only a Warrior Strong image and a credit link back to the package. A public site with official branding at the top and nothing at the bottom is missing the accessibility and privacy information the university expects a public page to publish, the same gap OfficialFooter closes with the university's own markup and this closes with WayneUI's own styling.
legal defaults to Accessibility and Privacy and University Policies, matching the official footer's own combined page rather than inventing separate privacy and non-discrimination links. Defaulted rather than left to each caller, because forgetting the accessibility link should not be a mistake anyone can make by omission.
Link groups are real lists, each headed by a visible heading referenced through aria-labelledby, the same pattern Sidebar and SidebarNav use, so a screen reader user gets the same grouping a sighted user sees rather than one long run of undifferentiated links.
Green in both themes, the same as Masthead: fixed university identity, not application furniture that should follow the page's own theme.
The raw PHP path has this native rendering too: `wsu_university_footer(['variant' => 'native'])` renders the same wsu-university-footer markup shown here. Any other value, including omitting variant, still returns the vendored official fragment.

Accessibility

The postal address is a real address element, not a styled paragraph, so assistive technology can find the contact details as what they are (1.3.1).
Each link group is a list with a visible heading, referenced by aria-labelledby, so the grouping is announced as well as shown (1.3.1).
legal and copyright sit in their own row, after the link groups in DOM order, matching the order they appear on screen (1.3.2).

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`variant`	`'official'`	"official" renders @waynestate/wsufooter; "native" renders this native footer.
`address`	`null`	Postal address lines, "native" variant only.
`columns`	`null`	[{ heading, links: [{ label, url }] }], "native" variant only.
`legal`	`Accessibility and Privacy and University Policies`	Overrides the default legal row.
`copyright`	`current year`	Overrides the generated copyright line, "native" variant only.

Vue

Prop	Type and default	What it does
`mark / markAlt`	`String, '' / 'Wayne State University'`	Or use the mark slot.
`href`	`String, 'https://wayne.edu/'`	Where the mark links to.
`address`	`Array, []`	Postal address lines, one per line.
`columns`	`Array, []`	[{ heading, links: [{ label, href }] }].
`legal`	`Array, [Accessibility, Privacy and University Policies]`	Overrides the default legal row.
`copyright`	`String, ''`	Overrides the generated copyright line for the current year.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-university-footer.

Template	Elements	Accessibility attributes	Uses
public apps/examples/static-html/public-app.html	`footer`	none recorded	1

University footer ​