Family
Page Headers
The full-width header that leads a hub content or section page.
01
The Page Headers family
Building outCover Ready
Content over a full-bleed cover. Background media fills the band; an optional content container sits over it.
5050 Ready
Content beside media in the right half (Standard Media or Letterbox shape), with an optional content container.
02
Model
- Layout is the variant. Cover (content over a full-bleed cover) and 5050 (content beside media) differ in how the content relates to the media, so they are separate variants. Everything else is a setting.
- Three layers. A Basic content core, a background media layer (image or video), and a foreground content container.
- The content container takes a fill. A Video Player today; a quick-registration form, an interactive map and other objects can occupy the same slot. The fill is a setting, not a new variant.
- Not chrome, not an event. Chrome is the App Bar and Footer (the persistent shell). The Event Header carries event data and lives in Events. The Page Header frames a content page.
Page Headers · Family Reference
The page-leading header: a Basic content core (kicker, title, subtitle) over a brand band, with a background media layer and a foreground content container. Two layouts, Cover and 5050. Distinct from the App Bar (Chrome) and the Event Header (Events).
The page-leading header: a Basic content core (kicker, title, subtitle) over a brand band, with a background media layer and a foreground content container. Two layouts, Cover and 5050. Distinct from the App Bar (Chrome) and the Event Header (Events).