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 guidelines

Lorem ipsum.
Lorem ipsum.

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.