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 guidance 

The side photo content card can be used to call out a specific CTA or message. Use C14 side photo content with carousel when you have more than one image. 

Headline

• Use H2, H3 or H4. 
• Keep headline engaging but fairly short. Bonus points if it’s action oriented.  
• The h tag should align with where it appears on the page (e.g., if an H2 is above it, then use an H3). See examples used for primary care and cardiac care. 

Support copy (optional)

• This is 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.  
• See examples used with support copy for primary care and cardiac care. 

CTA button copy (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.  
• Can use up to four CTAs. 

Image alt text (required) 

• This descriptive text will explain the photo if the image doesn’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.” 

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.

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.

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.