2 Column Carousel

BetterUp's Cards 2 Column Carousel module inherits all the features of the 2 Column Module while introducing a carousel functionality and the option to display content in a "2 Column Accordion" layout for the iPhone slider.

Usually, each column under this module takes up 50% of the available space. Exceptions to this are:

• A video column - a video column will take up 70% of the available space, and the other column will take up 30%. This is to retain usual video aspect ratios.

Fields

• 
  Background

  See background. Note that the Cards module only supports a black, white, or gray solid background, as the cards themselves have a background image.

• 
  Module spacing

  See module spacing.

• 
  Slider type

  Select a slider type. Options are:

  • 2  Column Standard  - both slides change when slider is scrolled. 
  • 2 Column Accordion - one side has an image or device, one side has an accordion. The image or device changes when the accordion items are hovered.
• 
  Section width

  Select section width, options are:

  • Full Bleed
  • Full Width 
• 
  Slider Navigation Color

  Appears if  "Section Width" is "Full Bleed".

  Select navigation color. Options are:

  • Dark
  • Light
• 
  Slider Background

  All standard background colors and the ability to add a background image. This is visible when the "2 Column Accordion" option is selected and controls the are behind the phone slider.

• 
  Slider Type (2 Column Accordion)

  Choose the type of 2 column accordion slider you'd like to have, options are:

  • Image
  • Phone with image inside

  Image is great for displaying product images and photography. Phone with image inside is great for displaying product images on a cell phone, specific dimensions are:

  • 659 px × 1427px dimensions
  • images must be without iPhone container/frame (see example here)
  • Only iPhones are supported in this option - if you'd like to feature another device screenshot please use the "Image" option and look to use an image with whitespace around it (see example here)
• 
  Accordion Side Content (2 Column Accordion)

  Choose the which side of the screen the accordion will display on, options are:

  • Left
  • Right

  Once a side is chosen you will be able to populate content in the Background, Eyebrow, Heading, Description and CTA fields.

• 
  Eyebrow

  Repeatable 2 column slides. If "2 Column Standard" is selected. These slides are made up of two elements, where you have the ability to set each column independently. 
• 
  Heading

  See heading.

• 
  Description

  In the introduction dropdown. Add a description to your introduction.
• 
  Mobile Image (2 Column Accordion)

  This field will appear if the "Phone with image inside" option is selected, options are:

  • Contain
  • Zoom

  Contain will ensure that the image is fully visible on smaller devices and Zoom will slightly enlarge the product image which sometimes adds to the design.

• 
  Accordion Slides (2 Column Accordion)

  Repeatable accordion slides. If "2 Column Carousel" is selected, there isn't a maximum set but no more that 6 slides is the recommended amount to ensure the modules doesn't get too tall.

• 
  Accordion Slide (2 Column Accordion)

  Options available in Accordion Slide. Options are:

  • Image - phone image
  • Slide Label - title of the slide
  • Slide Description - description of the slide (recommended character count 170)
• 
  Standard Card Layout & Interaction

  Appears if "Standard cards" is selected under "Card Type". Options are:

  • Simple card - card with background and text overlay. All information is always visible.
  • Split card - image on top, text on bottom. All information is always visible. Does not support a description.
  • Flip card - card will show background, eyebrow, & title by default, and flip to a solid background and description/link on hover.
  • Hover card - card will show background, eyebrow, & title by default, and display description on hover & link.
• 
  Card - Standard Options

  Options available in full bleed cards. Options are:

  • Image - Apply a background image to your card.
  • Eyebrow - Eyebrow will always be visible on the card.
  • Title - Title will always be visible on the card.
  • Description - Appears on based on option selected in "Standard card layout & interaction".
  • Add link - Check this to add a link to the card. See link. If no link label is applied, an icon will appear (play button for a video modal link, arrow icon for all other links). If a link label is applied, a CTA will appear.
• 
  Add an anchor

  See Anchor.