Exhibits header redesign

[alundgard]

Implement redesigned exhibits header for improved accessibility and design system alignment.

The Stanford Office of Digital Accessibility (SODA) confirmed the following accessibility issues with the current exhibits header design. Text appearing overlaid on background images must comply with WCAG color contrast guidelines. The masthead background images are specified by exhibit creators, and currently do not always satisfy the color contrast ratio with the exhibit title text.

Design and Engineering are working to align the header design across applications via the design system component library. The exhibits header poses unique challenges to this effort because it contains elements that do not appear in other applications. These elements include: a background masthead image, an exhibit subtitle (sometimes lengthy), header dropdown options (sometimes lengthy).

Because these elements are specified by exhibit creators, the ideal exhibit header design should satisfy accessibility requirements regardless of the creators’ choices.

The exhibit header redesign options are available in the “Exhibits Redesign 2024” Figma File: https://www.figma.com/design/0LTbMiP5xdL6T94nmlKDci/Exhibits-Redesign-2024?node-id=0-1&t=8KDvdYTqfPLMdHwC-1

The base header component can be found in “DLSS Components” Figma File: https://www.figma.com/design/K1syTsalaB1nlRftgOi0Pw/DLSS-Components?node-id=742-922&t=hezVZDhbDPM3h5IU-4
NB: The Application Subtitle Notes for responsive font size and display.