• 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.

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.

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

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.  

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.

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