C14 Side photo content with carousel

The Side Photo Content with Carousel component allows for an image paired with content to be displayed in a dynamic carousel format. It offers flexibility with the ability to showcase multiple images or content slides and includes the option for additional content above the carousel, enhancing user engagement by providing a more interactive experience.

Component requirements

Photo content card wrapper

Required:

• Title type: H2/H3/H4/P. Default: P.
• Content alignment: Left/Center. Default: left. 
• CTA style: Solid/Outlined/Link. Defines style of the second CTA in the card. Default: solid.
• Background color: White/White smoke. Defines background that will be applied to the wrapper. Default: white smoke.
• Side layout: 50/50 60/40. Defines area the image will occupy. Default: 50/50.
• Slide timing: Sets the duration between slide rotations. Default: 6.

Optional:

• Wrapper headline: Text field. Displays as the first element in the component.

• Wrapper top support copy: Rich text field. Allows users to add additional content. Content will appear below the headline and above carousel items.

• Wrapper bottom support copy: Rich text field. Allows users to add additional content. Content will appear below the carousel items.

• Wrapper CTA: Text field along with associated link type (internal/external/anchor/email/phone). Displays as the last element in the component.

Photo content individual cards

Required:

• Title type: H2/H3/H4/P. Default: P.
• Layout: 50/50 40/60. Defines area the image will occupy. Default: 50/50.
• Image side: Left/right. Default: left.
• Title (headline): Text field.
• Primary CTA: Text field along with associated link type (internal/external/anchor/email/phone).

Optional:

• Support copy: Rich text field. Allows users to add additional content.

• Secondary CTA: Text field along with associated link type (internal/external/anchor/email/phone).

• 3rd/4th CTA links: Text field along with associated link type (internal/external/anchor/email/phone).

Additional component notes:

• Recommended image size is 800x533.
• Image alignment is always set to center/center.
• If the image exceeds the recommended size, cropping may occur on the sides, top, or bottom.
• Carousel controls are automatically generated and 508 compliant.
• For consistency, all slides should maintain a uniform layout, with ALL images aligned to the left, or to the right.
• Individual card settings (left/right) will be overwritten by the wrapper.

Content guidance 

A carousel of images gives you the opportunity to display multiple photos with a unique message and CTA for each one. Use C13 side photo content card when you have one image. 

The copy requirements are similar to C13, but this component also includes optional wrapper copy that appears above the photos. See the images below for an example or check out the example on the LiveWell page.  

Top wrapper headline (optional) 

• Use this as an overarching headline that can apply to each message and photo in the carousel. It appears above the photos.  
• Use H2 or H3. 

Top wrapper subhead (optional) 

• Supporting copy can appear under the wrapper headline and above the images and copy.  
• This copy should make sense for each photo and copy in the carousel.  

Photo headlines (required) 

• Each photo in your content card carousel will need its own headline.  
• Keep this headline engaging but fairly short.  
• Use H2, H3 or H4. The h tag should align with where it appears on the page (e.g., if an H2 is above it then use an H3). 

Support copy (optional but recommended)  

• Each photo in your carousel can have its own support copy.  
• Consider this a brief caption highlighting the most important message to support the photo. 
• Opt for one to three sentences. It’s OK to leave out supporting copy if you don’t feel it’s necessary.  

CTA button (one required; more optional)  

• For the CTA button copy, use sentence case.   
• CTAs should be descriptive and clearly state what action users should take. Avoid using general phrases such as “click here” or “read more.”   
• CTAs should be kept to 30 characters or fewer.  

Image alt text (required) 

• This descriptive text will explain each photo if the images don't appear or if a person with visual impairment is using a screen reader on the page.  
• For example, if the photo is of a person getting their flu shot, the image alt text might be: “Person getting their flu shot at Advocate Medical Center.” 

Bottom wrapper subhead (optional)  

• Keep the copy short and use this as an opportunity to wrap up the “story” and message. 

Bottom wrapper CTA (optional)  

• For the CTA button copy, use sentence case.   
• CTAs should be descriptive and clearly state what action users should take. Avoid using general phrases such as “click here” or “read more.”   
• CTAs should be kept to 30 characters or fewer. 
   
   

ADA requirements

• Image requires an alt tag.
• Carousel controls must be fully operable via keyboard navigation.

Component examples

Example: Component example with 2 slides enabled. All individual card settings are overwritten by the wrapper. All wrapper fields (required and optional) are enabled. Image position is set to left. Slide layout is set to 50/50.