Footer

The compact footer used by the internal template.

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-footer">
  <div class="wsu-footer__inner">
    <div class="wsu-footer__mark" role="img" aria-label="Warrior Strong"></div>
    <ul class="wsu-footer__links">
      <li><a href="https://wayne.edu/">wayne.edu</a></li>
      <li><a href="https://tech.wayne.edu/">Help Desk</a></li>
      <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-footer__meta">&copy; 2026 Wayne State University</p>
  </div>
</footer>

{{-- Links come from config('wayne-ui.footer.links') --}}
<x-wsu::footer />

<Footer
  :links="[
    { label: 'wayne.edu', href: 'https://wayne.edu/' },
    { label: 'Help Desk', href: 'https://tech.wayne.edu/' },
    { label: 'Accessibility', href: 'https://wayne.edu/accessibility/' },
    { label: 'Privacy and University Policies', href: 'https://wayne.edu/policies' },
  ]"
/>

Why it works this way

Accessibility and privacy are in the default link list because the university is obliged to publish them. An application that quietly drops them is a compliance problem rather than a design choice.
The default Warrior Strong mark is an empty div carrying its own role="img" and aria-label, styled with a themed background image (a light and a dark SVG, swapped on the theme attribute) rather than an <img>, because a mask resolves by luminance and washes out a mark filled in a fixed brand color. A caller-supplied unit lockup is a real <img> with alt text instead, since there is no fixed light/dark pair to swap for an arbitrary URL.
Public applications get the official university footer instead. That one is @waynestate/wsufooter, and WayneUI does not fork or restyle its identity. The one exception: its own stylesheet never sets a color on its bare copyright text, so in dark theme that text falls through to the surrounding page and fails contrast. The adapter pins it to the same green the footer already uses for its links, and nothing else about the footer changes.

Accessibility

The mark is always a named image: role="img" plus aria-label for the default themed lockup, or a real alt on an <img> when a path or caller supplies a custom image URL instead (1.1.1).
contentinfo landmark from the footer element.

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
`links`	`config('wayne-ui.footer.links')`	Array of label and url.
`copyright`	`current year`	Overrides the generated line.
`mark`	`Boolean\|String, true`	true shows the Warrior Strong mark, false hides it, a URL overrides it with a unit lockup.
`markAlt`	`'Warrior Strong'`	Accessible name for the themed mark, or alt text when mark is a URL.

Vue

Prop	Type and default	What it does
`links`	`Array, []`	[{ label, href }].
`mark / markAlt`	`Boolean\|String, true`	true shows the Warrior Strong mark, false hides it, a URL overrides it with a unit lockup.
`meta`	`String, ''`	Falls back to a 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-footer.

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

Footer ​