Full Width Image

The Full Width Image component places an image to fill the width of a column. The image will scale up or down proportionately to fit the width of the column.

A title (H2), descriptive text and a CTA can be included that will overlay the image on larger screens and located below the image on smaller screens. Any text that is needed must use these fields, instead of embedding the text as part of the asset so it can be easily translated to other languages for the global sites.

Example

Title: 45 character max. including spaces lor

Description: recommended 150 character max. including spaces. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ri.

Use Cases

Lorem ipsum dolor sit amet, consectetuer adipiscin  

Sentence case text Shift + Return.

Sentence case text
Shift + Return.

The "Disabled Removing Tages between Title Text" is selected. More information abou this option below in the Authoring section.

Lorem ipsum dolor sit amet, consectetuer adipiscin  

Sentence case title

Description text. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 

Aenean massa. Cum sociis natoque penatibus

Title in Title Case Ipsum Dolor
Shift + Return Used

Sentence case title lorem ipsum dolor

The 3600 Series redefines the cordless experience with unparalleled technology that delivers an unmatched user experience. Bluetooth 4.0 Low Energy provides lightning fast wireless communications and maximum energy efficiency. 

Authoring, Requirements and Specifications


Title
  • Usage: The title provides a simple and concise message about the page
    • Include SEO keywords when possible
  • Case: Sentence or Title depending on copy
  • Character count (recommended): 45 maximum including spaces
  • Line breaks:  Line breaks should only be used if the text will cover the product
    • Use <Shift>+<Return> if a line break is necessary
    • Author must select the "Disable Removing Tags between Title Text" for the break to appear
  • Column usage: Do not use this field within a column that is 40% or less
    • If a title is needed, use a Rich Text Editor component below the image
  • Notes: If the text is long, use a Rich Text Editor component below the image
  • Translatable Field: Yes 

Disable Removing Tags between Title Text
  • Usage: Allows for the component to utilize the html tags from the Title field

Alignment
  • Usage: Determines horizontal placement of title, description and/or CTA

Description
  • Usage: Provides space for additional information messaging about page
  • Case: Sentence
  • Character count (recommended max.): 150 including spaces
  • Line breaks:  Do not use
  • Column usage: Do not use within a column that is 40% or less
    • If a description is needed, use a Rich Text Editor component below the image
  • Notes: If the text is long, use a Rich Text Editor component below the image
  • Translatable Field: Yes

CTA Bottom Position
  • Usage: When selected, the CTA will be aligned to the bottom of the image
    • Use only if the position of the CTA covers the product

CTA
  • Usage: Same as other calls to action (link below)
  • Column usage: Do not use within a column that is 40% or less
    • If a CTA is needed, use a Call to Action component below the image
  • Translated Field: 
    • Label: Yes
    • Link URL: Does not convert on edit-rollout
Background Theme
  • Usage: Determines color of text and background that overlays the image
    • Select the theme based on the image so the text is most legible

Full Width Image
  • Usage: Image displayed on large screen widths
  • Specifcations: See links below
    • Maximum Size: 1252px W  x 450px H

Mobile Full Width Image
  • Usage: Image displayed on small screen widths
  • Specifcations: See links below
    • Maximum Size: 580px W  x 450px H
Similar Components
  • The Image component offers more control on how the image is displayed and can be clickable, but does not allow for text to be placed over the image.
  • The Background Image Layer spans the full width of the browser regardless of device and is typically used to provide a subtle texture / backdrop on a page.
  • Use the Carousel component when more than one image is to be displayed on the page