Page Header

[danfox01]

Name

PageHeader

Description

• This is a header parent with component children. It will be visible at the top of every page, except the homepage.
• Basic content pages will contain just a breadcrumb and page title. (This should be the H1 from the CMS).
• Department landing pages will also include the optional elements listed below. Agencies are allowed a unique image, so this should be easily configurable for each page the component appears on. Agencies might also be given a choice from a small palette of pre-defined colors to overlay the images. (For now, we can use the blue header as the only defined option. But this must be left open for configuration in the future.)

Usage Guidelines

This component is a standard template element. When in the CMS, it will not be user-editable.

Please describe any required and optional properties for the component

<PageHeader>
  <Breadcrumbs />
  <PreTitle /> (optional)
  <Title />
  <Deck /> (optional)
  <Background Image /> (optional)
</PageHeader>

Example or Mockup

Department Landing Page:

Subpage:

Component children:

Acceptance Criteria

• Visual design and breakpoints for various screen sizes match department prototype and subpage prototype in staging.
• Mockup/examples should be created to show the landing page and subpage examples.

[sdurphy]

@martypowell, hex codes for overlay are as follows:

blue - #000b2b gray - #222222 green - #002e0d purple - #240a5b turquoise - #002930

Colors are at 87% opacity

[martypowell]

@danfox01 can you describe a deck?

[danfox01]

@martypowell it’s a printing term for a line of intro text at the beginning of an article. Does that help?

[martypowell]

@danfox01 yea i think that makes sense, this component will not be used outside of the page header right?