C11 Reverse row story with visual

This component presents alternating image and text pairings to support storytelling or content promotion. The layout dynamically shifts between rows, balancing visuals and content to create an engaging way to highlight key messages.
 

Component requirements

Wrapper requirements

Required:

• Wrapper title type: H2/H3/H4/P. Default: H2.
• Remove padding between rows: Checkbox. Determines whether rows have separation or not. Default: unchecked.

Optional:

• Wrapper top support copy: Rich text field. Allows users to add additional content.

• Wrapper bottom support copy: Rich text field. Allows users to add additional content.

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

Individual story row requirements

Required:

• Image side: Left/Right. Default: Left. 
• Title type: H2/H3/H4/P. Default: P.
• CTA style: Button/Link. Default: link.
• Content vertical alignment: Top/Center. Dictates if content is aligned to top of the row or centered. Default: Top.
• Headline: Title type: H2/H3/H4/P. Default: P.

Optional:

• Support copy: Rich text field. Allows users to add additional content.
• Primary CTA: Text field along with associated link type (internal/external/anchor/email/phone).
• Secondary CTA: Text field along with associated link type (internal/external/anchor/email/phone).
• Image: Visual element that is positioned either to the left or right of the content.

Additional component notes:

• Wrapper CTA appears only as a link (not a button)

Content guidelines

Lorem ipsum.
Lorem ipsum.

ADA requirements

Images must be designated as 'decorative' if they do not add meaning or context to the content.
CTA's need to have a descriptive link text.

Component examples

Example #1: Reverse row story wrapper with 2 items enabled. Wrapper headline, top and bottom support copy, as well as bottom CTA are all enabled. Wrapper includes padding in between row items. Individual cards are configured to alternate (left/right, right/left), with text aligned to top of card, title set to H3, support copy enabled on both, and varying CTA's.  

 
Example #2: Reverse row story wrapper with 2 items enabled. Wrapper headline, top and bottom support copy, as well as bottom CTA are all disabled. Wrapper padding removed. Individual cards are configured to alternate (left/right, right/left), with text aligned to center (middle) of card, title set to H2, support copy enabled on both, and CTA enabled on both and styled as a link.