Side by Side

Use the arrow keys or spacebar to go to the next slide.

Make this presentation full screen for best effect.

go to index

This component is used to display two cards next to one another (stacked on mobile) which gives your content a different look and feel. There are also a lot of flexibility when it comes to using this component. As of right now, by default, this component is available on the following content types:

 

  • Homepage
  • Landing page
  • Basic inner page
  • News

go to index

Overview

  1. Title - Title of the card
  2. Subtitle - Additional text that displays directly below the title field
  3. Teaser Text - Brief text describing the card
  4. Link - The link field is optional. If both 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 - Where the card should link to
    2. Link text - The label the displays within the card. Typically a descriptive call to action other than "read more" or "click here"
  5. Background Color - The background color of the card. Used only when a background image or video isn't used. Options include:
    1. Dark Red
    2. Dark Gray
    3. White

go to index

Side by Side Fields

go to index

Side by Side Background Color Examples

Dark Red

Dark Gray

White

go to index

Side by Side Fields (cont.)

  1. Background Image - Allows for a background image to be used on the card. Image will be scaled and cropped to be exactly 750x435

  2. Background Video - Allows for a background video to be used on the card. Recommended video size is 900x500. Aspect ratio should be 16x9 or 16x10

  3. Apply Mask to background image/video - Adds a semi-transparent mask to the background image to create additional contrast between the text and image if needed

  4. CTA visibility - Controls the visibility of the link field's text. Options include:

    1. On hover - text displays when the user hovers over the card with their mouse cursor or focuses within the card when navigating via keyboard.

    2. Always - text always visible regardless of user interaction

  5. CTA position - Controls the position of the link field's text within the card. Options include

    1. ​Bottom of the card

    2. Below the subtitle

go to index

Side by Side Fields (cont.)

  1. CTA Display Options - Allows special treatment to be applied to the link field's text. Options include
    1. Underline text
    2. Button
  2. Text Visibility - Controls the initial visibility of ALL text within the card. Options include:
    1. Always - text is always visible
    2. On hover - text is initially hidden until the user hovers over the card with their mouse cursor or focuses within the card via keyboard
  3. Text Alignment - Controls the alignment of all of the text within the card. Options include left, right, or center.
  4. Text Color - Controls the color of the text. Options include:
    1. Light - used when the selected background color is darkk or when the background image/video is on the darker side
    2. Dark - used when the selected background color is white or when the background image/video is on the light side

Side by Side Component (backend)

Congratulations!
You have completed the

Side by Side Walkthrough

use the back button to go back to where you were