Side by Side

This guide demonstrates how to use the Side by Side component to display two cards next to one another (stacked on mobile) to give your content a different look and feel. There is a lot of flexibility when using this component.

Step by step

To add the Side by Side component:

1. On the page you are creating or editing, select the Component tab. Then, tap the Components drop-down. 
   
   
    
2. Choose Add Side by Side.
    
3. The component will appear. Complete the following fields:
   1. Title - Enter a section title, which will display in large font.
   2. Subtitle - Enter a short description, if desired. Displays below the title.
   3. Teaser Text - If enabled, enter a text description of the content of the card.
   4. Link - The link field is optional. If both the URL and Link Text fields have values filled in, the entire card will become a link. If both fields are left empty, no link will be rendered.
      1. URL - Enter the URL of the page the user will be brought to.
      2. Link text - Enter a title that describes the link destination. This is the text displayed as the clickable text. For example, "Learn more".
   5. Background Color - Choose between Dark Red, Dark Gray, or White. If you upload a Background Image or Background Video, the image/video will override this section.
   6. Background Image and Background Video- If desired, upload an image or video which will display as the background. Select Choose File, then select the desired file. Review DAS's helpful hints for writing alt text for images.
      1. Note - Be mindful of choosing an image or video that ensures sufficient color contrast. If needed, enable the Apply make to background image/video option to create an overlay.
   7. CTA Visibility - Controls the visibility of the "Link" text.
      1. On Hover - Link text will display when the user hovers over the card if using a mouse or focuses within the card if using a keyboard.
      2. Always - Link text will always be displayed.
   8. CTA Position - Controls the position of the "Link" text.
      1. Bottom of Card - Link text will display at the bottom of the card.
      2. Below the Subtitle - Link text will display directly below the subtitle.
   9. CTA Display Options - Allows further customizability of the "Link" text.
      1. Underline text - Link text will appear with an underline.
      2. Display arrow after - Link text will appear with an arrow next to it.
   10. Text Visibility - Controls the initial visibility of ALL text within the card.
       1. On Hover - Card text will display when the user hovers over the card if using a mouse or focuses within the card if using a keyboard.
       2. Always - Card text will always be displayed.
   11. Text Alignment  - Controls the alignment of text: Left, Centered, or Right.
   12. Text Color - Controls the color of the text:
       1. Light - Use when the selected background color is dark (for example, Dark Red or Dark Grey) or when using an image/video.
       2. Dark - Use when the selected background color is light (for example, White). 
           
4. To delete the entire component, tap Remove. Then, tap Confirm removal. 
    
5. Select Save. If you are ready to publish your page, ensure the Published toggle is enabled (green in color). 

Examples

Front-end