Enhanced Content Image Banner

Introduction

The content image banner is a full width, highly visual banner that is typically used to introduce a page, but can be used in other contexts to draw attention to content. It is typically used to call out a single piece of information or action accompanied by a strong visual element. This area is usually styled to stand out visually from the rest of the page’s content and can contain a concise heading, sentence and button.

When to use

Use a Content Image Banner when you need to draw attention to an action or piece of content.
The number of Content Image Banners on a single page should be limited to avoid overloading the page.

Component properties

Theming:

Component Background Color - Select a background color from the list below. This color will apply to the background of the entire component behind the banner & the secondary content
Toggle Associated Content Background Color – this allows the user to change the background color of Placeholder 2. This color depends on the theme selected and cannot be adjusted itself.
Theme: Choose from Light or Dark and the default font color and background color changes accordingly
Background color: Select a background color from the list. This changes the background color of the top portion of the Content Image banner where the main content should reside.

Decoration:

Toggle Decorative Bar
The color of the bar cannot be adjusted currently

Associated Content Background Color:

Toggle Associated Content Background Color – this allows the user to change the background color of Placeholder 2. This color depends on the theme selected and cannot be adjusted itself.

Image Position:

The default image position of a half width image is on the right and can be changed to the left.

Vertical spacing: The vertical spacing controls increase or decrease the amount of spacing at the top of the item being changed. Currently our standard spacing is 112px.

Spacing control options are:

Extra Small – Mobile: 16px | Tablet: 24px | Desktop: 32px
Small – Mobile: 24px | Tablet: 40px | Desktop: 48px
Medium – Mobile: 32px | Tablet: 56px | Desktop: 64px
Large – Mobile: 40px | Tablet: 72px | Desktop: 88px
Extra Large – Desktop: 112px

Note: the spacing values you will see in the Sitecore dropdown field are the Desktop pixel values.

Sitecore fields:

Eyebrow Heading (Optional)

An eyebrow heading provides a brief summary of the type of content

Single Line Text Field

Limit text to two or fewer lines at max width (approx. 50 characters or less).
Main heading for the page or content area. When at the top of the page, it labels the page or describes the page’s purpose.

Sub Title – H2 (Optional)

Single Line Text Field

Limit text to two or fewer lines (approx. 100 characters or less).

Secondary heading for the content area. Supports the content in the Heading through an offer or softer marketing language.

Description: (Required)

Multi Line Text Field

Recommended line length: limit to four or fewer lines at max width (approx. 300 characters or less).
Does not support the ability to add markup
Does not allow center-alignment or right-alignment of text

Call to Action (Optional)

Primary call to action for a topic
Styled as a button
Recommended text length: Limit button text to three words or fewer.

Call to Action 2 (Optional)

Secondary call to action for a topic styled as a ghost button
Recommended text length: Limit button text to five words or fewer.

Image: (Required)

This is not intended to be used for a graphic or illustration.
Supports half width and full width images

Additional information

Image Location in Sitecore:

Images must be placed in their respective folders in the Sitecore Media Library for use with the component.

The top-level CIB folder can be found in the Sitecore Media Library at the following path: media library/Feature/Common/Banners/Content Image Banner.

The following image shows the folder structure for the component’s media assets.

For non-content friendly images, a mobile image should be used and placed in the above Mobile Images folder.

Full width image usage:

For full width images, there are two image options:

A content friendly background image is one that either dark or light textual content can be placed over and will be accessible. It may have an image or video placed over it opposite of the textual content.
A non-content friendly background image is one that has imagery on either the left or right that should not be covered by any other content. Non content friendly images require a separate mobile image.

Note: The mobile image field is not supported for half width images. For half width images, the image is expected to shrink down appropriately. Please choose an appropriate image for both desktop and mobile and test to see how it looks.

Color options

Please see the Colors page for more color option details.

Image specs

Suggested standard image upload size: 1200px width x 800px height. Exporting the image at 2x will give you the best image clarity for retina screens.

Spacing

Follows full width component vertical spacing rules
Built in bottom padding below Placeholder 2 of 7.2 rem / 72px
Min-height of banner: 580px

Content Variations

CIB with title, description, eyebrow and CTA

Content Image Banner with title, description, and CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan lobortis sapien, vitae condimentum enim dignissim eu. Praesent efficitur vulputate diam, eu tincidunt eros finibus vestibulum. Integer in molestie magna. Cras ut mi sit amet.

CIB with title, description, CTA 1 and CTA 2

Content Image Banner with title, description, CTA1, and CTA 2

CIB with title and description

Content Image Banner with title and description

CIB with title, subtitle, description, CTA, CTA 2, and placeholders

Content Image Banner with title, subtitle, description, CTA 1, CTA 2, and placeholders

Lorem ipsum dolor sit amet.

CIB with title and CTA

Content Image Banner with title and CTA

CIB with Simple Image

Content Image Banner with Simple Image

Example content

CIB with Video

Content Image Banner with Video

Example content

CIB with PH2 Content

Content Image Banner with PH2 Content

Sub TItle

Settings

CIB full width

Image on left

Content Image Banner with title, description, and CTA

Dark mode theme

Content Image Banner with title, description, and CTA

White Paper Title

This is a brief 1-3 sentence description of the content the card pertains to. Cards can contain links, images, buttons, etc.