Skip to main content

Global styles

Component styles

Banner

Content options

  • Title
  • Breadcrumb
  • Background image (has overlay when title is present)

Background options

  • Background color
  • Background image (has overlay when title is present)
  • Watermark
  • Height
    • Fit content (content + padding)
    • Half-height (50vh)
    • Full-height (100vh)

Positioning

  • Position absolute

Banner - fit-content

Banner with:

  • Image
  • Image & title
  • Image, title & breadcrumb
  • Background-color
  • Background-color & title
  • Image, background-color & title

Banner - height-50vh

Banner with:

  • Image
  • Image & title
  • Image, title & breadcrumb
  • Background-color & title
  • Image, background-color & title

Banner - height-100vh

Banner with:

  • Image
  • Image & title
  • Image, title & breadcrumb
  • Background-color & title
  • Image, background-color & title

Image banner - Postion absolute

Banner with:

  • Image
  • Image & title
  • Image, title & breadcrumb
  • Background-color

Image banner - Postion absolute -- tall

Banner with:

  • Image
  • Image & title
  • Image, title & breadcrumb
  • Background-color