C11 Reverse row story with visual

This component presents alternating image/video 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.
• Video ID: Allows to embed a video instead of an image. Youtube ID required

Additional component notes:

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

Content guidance  

The reverse row story with visual component helps grab a reader’s attention with the use of imagery when trying to introduce a concept or suggested service.  

Because they are for high-level communication, these sections should connect the audience to desired actions, like signing-in, scheduling an appointment or viewing a webpage.  

Headline

• The headline is optional. 
• Best practice is to include the headline to introduce the content showcased within that component. 
• Headlines should use H2 tags. 

Top support copy 

Top support is optional and should be used if there needs to be additional context between the headline and the content. It can also be helpful if there’s a hyperlinked CTA that supports the subject or theme of the component. Top supporting copy could feature rich text hyperlinks to download the app, sign-in or make an account. 

Story row title 

• If this row features content that connects people to a page, consider the title of the page, or what the audience will learn or do when they click through. 
• Be as concise as possible. 
• Relate title to the content that immediately follows. 
• Use H2 or H3 if a headline was already included. 

Individual row supporting copy 

• Ideally copy should consist of one or two sentences.  
• Copy can feature hyperlinks to other actions and pages. See an example on this page.  

CTA copy 

• CTA buttons are optional. 
• If you choose to use a CTA button, two words are ideal. 
• 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. 

Bottom support copy and CTA 

• Bottom support copy is optional.  
• Bottom support copy can be used when the component’s contents may leave some members of the audience looking for different information. See an example on this page.  

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.