Banners

Banners are typically placed at the top of the page to convey an important marketing message or drive users to a primary task. Event Title and legal statement are optional banner elements that cannot appear on the same banner.

Design System Guidelines

Hero Banner with Optional Legal Statement

Hero Banner with Optional Event Title

Link Picker

Use the first select and then the second select to enable the Find button.

Mosaic

The mosaic is supposed to become a carousel on SM and XS breakpoints. The mosaic currently simulates the carousel transformation, but without functionality.

Die Cut Banner

Used for marketing messages that are either contextual to the content preceding it, or to the subject matter of the page. Can utilize one or two text links.

Site-wide Messaging

The primary text (preceding the link options) is supposed to truncate if the entire paragraph exceeds three lines, but Webflow makes it difficult to do this.

Any number of the optional elements can be removed from a message.

Standard Site-wide Messaging

With Optional Second Link

With Optional Image and Second Link

With Optional Image, Second Link and Tools

With Optional Image, Second Link, Tools and Countdown Timer

Within the timer sub-component, days is an optional value.