HomeStarbucks Pattern Library

HeaderCrate

Notes

HeaderCrate is a panel that contains contextual information like navigation, breadcrumbs, and supplementary content. On small screens, it is rendered as a header before other page content. On wide screens, it is a persistent panel anchored to the left half of the screen.

HeaderCrate includes a subcomponent, HeaderCrate.Inner, which is used to wrap the main content of the crate. The Inner content is vertically centered with generous padding, to call attention to its content. Other content like headers and footers for the crate should typically be added outside of Inner.

HeaderCrate extends Component so that it may accept a ref from consuming components.

Props

  • classNamestring
  • hasGlobalNavbool

    If true, adjusts the padding of content to align with global nav elements

  • hasNavBarbool

    If true, adjusts the position of the HeaderCrate to allow the NavBar to be positioned visually within the HeaderCrate

Example: Header Crate

ContentCrate

Notes

ContentCrate is a panel that contains primary page content. It is designed to be used in conjunction with HeaderCrate.

Props

  • classNamestring

Example: Content Crate

Example: ContentCrate and HeaderCrate used together