Banner
Text banner
Section titled “Text banner”
Showing: Text banner with optional text callout
States
Section titled “States”Underline link
Section titled “Underline link”The text banner itself does not have states, but the link underline has states.
Background color
Section titled “Background color”The text banner supports secondary background.
Showing: Text banner in primary background
Spacing
Section titled “Spacing”Page margins
Section titled “Page margins”The text banner supports page margin layouts on breakpoints md, lg, and xl.
Showing: Text banner in page margin layout on lg breakpoint
On sm breakpoint the content is full bleed.
Examples
Section titled “Examples”
Example: Text banner used for various callouts on lg breakpoint
Example: Text banner used for various callouts on sm breakpoint
Media banner
Section titled “Media banner”
Showing: Media banner with optional text callout
Variants
Section titled “Variants”Ratios
Section titled “Ratios”The media banner includes multiple media ratios to allow for compact and tall layouts.
Showing: 1:1, 4:5, 4:3, and 16:9 ratio variants.
Media type
Section titled “Media type”The media banner includes two media types to allow for image and video.
Showing: Image and video variants
Layout
Section titled “Layout”The media banner includes two layout variants — left and right — to allow for vertical stacking of multiple banners.
Showing: Left and right layout variants
States
Section titled “States”Underline link
Section titled “Underline link”The media banner itself does not have states, but the link underline has states.
The media section comes with a default secondary background color to support transparent PNGs.
Showing: Media banner with secondary background in media container
Spacing
Section titled “Spacing”Page margins
Section titled “Page margins”The media banner supports page margin layouts on breakpoints lg and xl.
Showing: Media banner in page margin layout on lg breakpoint
On md and sm breakpoints the media is full bleed.
Examples
Section titled “Examples”
Example: Media banner used for various callouts on lg breakpoint
Example: Media banner used for various callouts on sm breakpoint
Considerations
Section titled “Considerations”Page margin
Section titled “Page margin”
Do only use one banner taking up the full width of a container or page.
Do only use one banner taking up the full width of a container or page.
Don’t use the sm breakpoint layout as a card.
Don’t grid two horizontal banners on a page.
Don’t use the sm breakpoint layout as a card.