Multi-Column

BetterUp's multi-column module is a versatile module for displaying short libraries if information. Columns can be arrange in 3 or 4 column rows, and laid out to fit a variety of information.

Some notes:

• Why aren't 5 columns supported? 5 Columns don't fit well within our pre-set content max widths. Please use a 3 column layout, with 2 items in the second row.
• All items are available to be linked. However, not all items need to be linked.
• If using the "Wrapped Text" style, attempt to keep all three modules about the same length on desktop.

Fields

• 
  Module spacing

  See module spacing.

• 
  Background

  See background.

• 
  Module Content

  Choose what content to include in your multi-column module. Options are:

  • Wrapped Text
  • Text Columns
  • Stats with description
  • Images & Text
• 
  Wrapped Text Content

  Appears if "Wrapped text" is selected under Module Content. Holds all the fields to add wrapped text to your module.

• 
  Eyebrow

  In the "Wrapped Text Content" dropdown. Add an eyebrow to your module. The eyebrow will be in all caps, and be smaller text above the heading. Note that eyebrows should be short - just a few words, and not a full sentence.
  
  

• 
  Heading

  See heading. In the "Wrapped Text Content" dropdown.

• 
  2nd Column Text

  In the "Wrapped Text Content" dropdown. Copy for the middle column of your wrapped text module.

• 
  Add quote?

  In the "Wrapped Text Content" dropdown. Check this box to add a quote in your module. This quote will appear in the third column.

• 
  Quote

  In the "Wrapped Text Content" dropdown. Appears if "Add quote" is checked. This quote will always appear in the H2 style, and quotation marks will be added automatically.

• 
  Attribution

  In the "Wrapped Text Content" dropdown. Appears if "Add quote" is checked. Add quote attribution here, and a dash "-" will be added automatically.

• 
  3rd Column Text

  In the "Wrapped Text Content" dropdown. Copy that will appear in the third column of your wrapped text module.

• 
  Configure CTAs

  See CTA. In the "Wrapped Text Content" dropdown. Add CTAs to your wrapped text content- note that these CTAs will appear in the first column under your heading.

• 
  Add Introduction?

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content". Check this box to add an introduction to your section.

• 
  Introduction dropdown

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content", and "Add introduction" is checked. Holds all the fields for adding an introduction to your content.

• 
  Heading

  See heading. In the "Introduction" dropdown.

• 
  Description

  Add a description to your introduction.

• 
  Text alignment

  In the "Introduction" dropdown. Select how your introduction should be aligned. Options are:

  • Center
  • Left
• 
  Items per row

  Appears if "Text Columns" or "Images & Text" is selected under "Module Content". Select a number of items per row. Options are 3 or 4.

• 
  Content

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content". Holds all the repeated items in your module. Click & drag to rearrange the items.

• 
  Content - Text Columns

  Appears in the Content item if "Text Columns" is selected under "Module Content". Options are:

  • Label
  • Eyebrow
  • Description
• 
  Content - Add Link

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content", and within a Content item.

  Check this box to link your content item.

• 
  Content - Link

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content", and within a Content item. Only appears if "Add Link" is checked.

  This dropdown holds options for linking your section of content. Options are a URL or a Modal. For more on how this works, see the CTA field.

• 
  Content - Link Label

  Appears if "Text Columns", "Stats with description", or "Images & Text" is selected under "Module Content", and within a Content item. Only appears if "Add Link" is checked.

  Add a link label to your item. This will display different depending on the layout of your content.

• 
  Countup Stats

  Appears if  "Stats with description" is selected under "Module Content".

  Check this box to animate the stats on scroll. When the user scrolls to these stats, they'll animate up to their final number from zero. Not recommended if your module is above the fold, or if one of your numbers is less than 10.

• 
  Content - Stats with Description

  Appears in the Content item if "Text Columns" is selected under "Module Content". Options are:

  • Number
  • Description
  • Link Label (if "Include Link" is checked)
• 
  Image & Text layout

  Appears if "Images & Text" is selected under "Module Content". Choose how your images & text should be laid out. Options are:

  • Image on top, text on bottom
  • Image background, text on top
• 
  Image Shape

  Appears if "Images & Text" is selected under "Module Content", and if "Image on top" is selected as the image layout.

  You should select an option in this field based on the types of images you have available for this section. Note that this setting will apply to all content items within the module.

  Options are:

  • They (images) vary. Make them all fit into squares
  • They (images) vary. Make them all fit into rectangles
  • They're all the same size. Display the whole image
• 
  Text alignment

  Appears if "Images & Text" is selected under "Module Content", and if "Image on top" is selected as the image layout.

  Choose how the text should be aligned in all of your images. Options are:

  • Center
  • Left
• 
  Content - Images & Content

  Appears if "Images & Text" is selected under "Module Content" as the content item options. Options are:

  • Label
  • Image
  • Description
• 
  Mobile Layout

  Appears if "Images & Text" is selected under "Module Content".

  Choose how your module should be laid out on mobile screens. Options vary based on the value in "Image & Text layout".

  If you have "Image on top" selected, options are:

  • Display the image smaller, next to the content.
  • Display the image full width on top of the content.

  If you have "Image background" selected, options are:

  • Display the image smaller, next to the content, instead of a background image.
  • Display the image as a background behind the content, just like desktop.
• 
  Add an anchor

  See Anchor.