Component Library – Sidebar Pages

S1: Sidebar Hero

Page Title

Flexibility:

  • The height can be set as a pixel value.
  • The background image will always fill the entire hero, even if it has to stretch.
  • The text can be vertically aligned with the top, center, or bottom of the hero, and horizontally aligned with the left, center, or right.

Limitations:

  • The image will hide on mobile.
  • The top, bottom, and right edges of the background image will bleed out of view on certain screen sizes where the image doesn’t perfectly fill the area of the hero.
  • The image must contrast dramatically with the overlaid text in order to be visually accessible. Text shadows can not currently be applied.