Hero Banners

Accessibility Note:
In Cynder, every page has a title which is automatically set as an H1. It is read by screen readers, even if the page title is not displayed because a row is set to full-width stretch.
There should only be one H1 in the body of each page. Therefore, headers in your hero banners should be set as H2s.

Photo with Heading

• Background photo adjusted through Cover widget setting.
• Background Overlay on added in Cover widget styles.
• Minimum Height by default is 350px, but can be adjusted Cover widget styles

Photo with Cut Corner & Heading

• Background photo adjusted through Cover widget setting.
• Background Overlay on added in Cover widget styles.
• Minimum Height by default is 350px, but can be adjusted Cover widget styles
• Notch added with CSS Class added in Advanced tab
  • cutcorner-left moves the notch to the left
  • cutcorner-right moves the notch to the right
  • cutcorner-center moves notch to point at center

Photo with Lower Heading

• Background photo adjusted through Stack widget styles. Toggling off the Fixed Background switch removes parallax scroll on photo.
• Inner content wrapped in a Group which includes a Spacer and Text widget. Switching order moves the text to the bottom.
• Background (UConn Blue to Transparent) Gradient on Group.

Photo with Stacked Text

• Background photo adjusted through Stack widget.
• Inner content wrapped in a group which includes a Spacer and Text widget. Switching order moves the text to the bottom.
• Background (UConn Blue to Transparent) gradient on group.

Photo with Cut Corner & Stacked Text

• Background photo adjusted through Stack widget.
• Notch added with CSS Class added in Advanced tab
  • cutcorner-left moves the notch to the left
  • cutcorner-right moves the notch to the right
  • cutcorner-center moves notch to point at center
• Inner content wrapped in a group which includes a Spacer and Text widget. Switching order moves the text to the bottom.
• Background (UConn Blue to Transparent) gradient on group.

Screen-Height Photo with Stacked Text (Left)

• Background photo adjusted through Cover widget.
• Background (UConn Blue to Transparent) gradient is an overlay.
• Inner content placement adjusted on the cover widget level

Screen-Height Photo with Stacked Text (Right)

• Example with gradient and inner content placement adjusted to the right on the cover widget level

Photo with Left Block

• Background photo adjusted through Cover widget.
• Inner content placement adjusted on the cover widget level

Photo with Right Block

• Example with gradient and inner content placement adjusted to the right on the cover widget level

Photo with Cut Corner, Left Block & Adjustable Spacer

• Background photo adjusted through Stack widget.
• Spacer widget allows for adjustable peak through to background element. Placing the spacer below the group element pushes box to top.
• Background color, text, and Inner content width adjusted on the group widget.

Multiple Photos

• Place any number of photo in Row widget to create grid like pattern. (Recommend 3-5)
• Current Images set to crop at a Tall (9:16) ratio, edited in the Image widget settings.

Multiple Photos with Double Cut Corners

• Example of Banner with Centered Notch
• Notch added with CSS Class added in Advanced tab
  • cutcorner-left moves the notch to the left
  • cutcorner-right moves the notch to the right
  • cutcorner-center moves notch to point at center

Random Photo Rotation

• Randomly shows a single photo on load.
• Photos added via Gallery widget.
• You will see the full selection of photos stacked when editing page, but only 1 appears at a time to website visitors.

Lead Text

Narrow Text Column

---

Quote + Text

Infographics

Facts & Figures with Background Photo

Simple Facts & Figures

Category Tiles

Content Columns

---

---

---

---

Cards

News & Events Row

Celebration Row

Apply or Button Row

Promo Row