C13 Side photo content card

The Side Photo Content Card component pairs an image with accompanying content, allowing for a dynamic layout where the image is positioned alongside text with up to four CTAs. The component helps create a more engaging user experience, making it ideal for showcasing offerings or promoting actions.
 

Component requirements

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.

Content guidelines

Lorem ipsum.
Lorem ipsum.

ADA requirements

Image requires an alt tag.

Component examples

Example #1: Photo content card with only required fields enabled. Image is positioned on the left. Layout configured as 50/50.

side photo card placeholder image

This is C13 example title/headline (required)

CTA 1 (required)

 
Example #2: Photo content card with required fields enabled along with support copy and primary/secondary CTAs. Second CTA is styled as outlined. Image is positioned on the right. Layout configured as 60/40.

side photo card placeholder image

This is C13 example 2 title/headline (required)

This is C13 example 2 support copy (optional)
CTA 1 (required)CTA 2 (optional)

 
Example #3: Photo content card with all (required and optional) fields enabled. Up to 4 CTA's are supported. Second CTA is styles as solid. Image is positioned on the left. Layout configured as 50/50.

side photo card placeholder image

This is C13 example 3 title/headline (required)

This is C13 example 2 support copy (optional).
De carne lumbering animata corpora quaeritis. De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.

CTA 1 (required)CTA 2 (optional)
CTA 3 (optional)CTA 4 (optional)