Full-Bleed Background Image
Layout Variant: C064
Content Type: Collection
| Teaser Title | Teaser Text | Pictures and Media | Items | CTAs |
C064 Collection | Yes | Yes | Yes | Yes | Yes |
Items (Picture) | No | No | Yes | No | No |
Aspect Ratio:
- Background Image 2:1
- Foreground Image 1:2
Expected Use:
- A visual approach to a mid-page content block, offering the opportunity to feature a wide range of content types and provide links to related pages.
- Utilize this color-block content feature to add dynamic visuals to your page. This component is great for briefly highlighting long-form content, product features, case studies, etc., and linking out to more information on the topic. Be sure to use a background image that is simple, yet stands up to a transparent application.
- Place your background image in the Picture field and your foreground image in the Items field. The background image is not displayed on mobile.
Building the Component:
For the main C064 Collection, style the collection with the Layout Variant C064.
- Teaser Title - The headline of your component
- Teaser Text - The body copy of your component
- Pictures and Media - The primary image of your component shown on the left third of the component
- Items - Drop a Picture in the items list for the background image
- CTAs - You may add one or two CTAs to the bottom of the component by selecting the "Use Linked Call-to-Action Label" and adding a teasable item (or items) that have defined CTAs. To use two CTAs and define them, you will need to select "Use Custom and Linked Call-to-Action Lablel".
