Masthead

WayneUI's own university masthead: a wordmark, a couple of utility links and an optional wayne.edu search box, styled on the design system's own tokens rather than the official chrome.

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.

<div class="wsu-masthead" role="region" aria-label="University">
  <div class="wsu-masthead__inner">
    <a class="wsu-masthead__wordmark" href="https://wayne.edu/">
      <img src="/assets/wayne-ui/marks/wsu-wordmark-reverse.svg" alt="Wayne State University" width="605" height="65">
    </a>
    <div class="wsu-masthead__utility">
      <a class="wsu-masthead__link" href="https://login.wayne.edu">Login</a>
    </div>
  </div>
</div>

Why it works this way

• Renders a div, not a header. AppBar is the page's one banner landmark, and two banners on a page is a landmark violation as well as a confusing thing to navigate by. This carries role="region" and aria-label="University" instead, the ARIA landmark built for a section worth naming and jumping to that is not the page's navigation, banner, search or main.
• Green in both themes: it is the university's signature rather than the application's furniture, and the wordmark it carries by default is the reverse file, drawn for a green background, which is why this is the one wordmark this system never swaps for a light and dark pair.
• The lightweight alternative to the official chrome. Use OfficialHeader where the page is publicly reachable and must carry the real wayne.edu markup; use this where a page wants the university lockup, a sign-in page, say, without the full official header. On the Blade path the two are one component: masthead's own variant prop chooses between them, and variant="official" is the default.
• The raw PHP path has a native rendering too: `wsu_masthead(['variant' => 'native'])` renders the same wsu-masthead markup shown here. Any other value, including omitting variant, still returns the vendored official-header.html fragment.
• All three paths render the native search submit as wsu-btn--ghost. Vue used wsu-btn--icon until 2.0.6, a drift the contract could not see because the canonical native masthead carries no search; a test now pins the class so the paths cannot quietly fork again.
• The search field and its submit button are one seated control: the wrapper owns the border and the focus ring, and draws the ring on :focus-within, because that is the control a sighted user perceives, not the input alone.

Accessibility

• role="region" with aria-label="University" (4.1.2): a wordmark linking home is not itself a navigation menu, so nav would overclaim, and a plain div carries no landmark at all, which would leave its own links outside every landmark on the page.
• The search field carries a visually hidden label, since its placeholder, "Search", disappears on focus and cannot be the field's only name (1.3.1, 3.3.2).
• The wordmark is a real img with alt text when a URL is supplied, or the fallback text run when it is not, never a background image with nothing in the accessibility tree (1.1.1).

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 the real wayne.edu masthead (@waynestate/wsuheader); "native" renders this native one.
wordmark	null	Path to a custom wordmark image, "native" variant only. Falls back to the reverse wsu-wordmark.svg.
links	null	[{ label, url }] of utility links, "native" variant only.
search	null	Shows the wayne.edu site search, "native" variant only. Searches the university, not the application.

Vue

Prop	Type and default	What it does
wordmark / wordmarkAlt	String, '' / 'Wayne State University'	Or use the wordmark slot.
href	String, 'https://wayne.edu/'	Where the wordmark links.
links	Array, []	[{ label, href }], or use the utility slot.
search	Boolean, false	Shows the wayne.edu site search. Searches the university, not the application.
searchAction	String, 'https://wayne.edu/search'	Form target for the wayne.edu search.
searchLabel	String, 'Search wayne.edu'	Accessible name for the wayne.edu search field.

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-masthead.

Template	Elements	Accessibility attributes	Uses
public apps/examples/static-html/public-app.html	div	aria-labelrole	1