Content Preview - Multi Column

The Content Preview - Multi Column component is an evolution of the Content Preview 3x component, designed for greater flexibility and impact. While it maintains the familiar structure of linking to pages or stories with images and summaries, this version utilizes a wider container to provide more horizontal screen real estate for your content. Key enhancements include support for a variable number of columns (ranging from 2 to 5) and the introduction of asymmetrical layouts—such as "large left," "large right," or "large center" configurations — allowing for more dynamic visual hierarchies on your page.

Shared Component Settings

The settings below are universal to the Content Preview - Multi Column component regardless of which layout or column count you select.

• Heading [Short Text] (optional): Enter a title to appear above the column grid.
• Heading Level [Dropdown: h2 - h5]: Choose the heading level for the Heading (defaults to h2). If Heading is empty, this field does nothing.
• Column Title Level [Dropdown: h2 - h6]: Choose the heading level for the Column Titles (defaults to h3). This field is only used if Heading is empty. If Heading is not empty, the Column Title Level will be one level lower than the Heading Level. Column Title Level does not change the appearance of the Column Titles.
• ID [Short Text] (optional): Add an ID to be used as a link target on the page. ID must be unique on the page and use only lowercase letters, numbers, and hyphens (-). The first character must be a letter.
• Introductory Text [Long Text] (optional): Add a summary or lead-in text above the columns.
• Background Color [Radio Buttons]:
  • Grey
  • White (Default)
• Animation [Checkbox]:
  • Fade In: If checked (default), rows will fade in after the component scrolls into view. If unchecked, the content will already be in place when the component scrolls into view.
• Layout [Dropdown]: Choose the number of columns and the width distribution for the content grid. Options include equal-width columns (2-5) and asymmetrical arrangements (Large Left, Large Right, or Large Center).
• Columns [Element Group]:
  • Column Image [Image Chooser] (optional): URL of the image or select an image from the current site. For optimal results, use images 700px wide with a height of 400px or less.

    Tip: To ensure visual alignment across the row, use images with identical heights for every column.

  • Column Image Description [Short Text] (optional): Enter a brief description of the image. This text serves as the "alt text" which is essential for web accessibility and screen readers.
  • Column Title [Short Text] (optional): Enter the main heading for the individual column. If a link is provided in the Column Link field, the title will automatically become a clickable link.
  • Column Link [File Chooser] (optional): URL for the column’s destination or select a page from the current site. When a link is provided, it is automatically applied to the Column Image and Column Title.
  • Column Body [WYSIWYG] (optional): Use this editor to add a summary or descriptive text for the individual column.

    Note: This field should contain text only. To ensure proper alignment and mobile responsiveness, do not insert images directly into this editor; use the dedicated Column Image field instead.

• Add New Group [Button]: Use this button to add more columns. Ensure the number of groups you add matches the number of columns selected in the Layout dropdown.

Layout Examples on This Page

Select a layout below to see it in action alongside variations in text formatting, mixed assets, and hidden elements:

• 2 Columns: Equal
• 2 Columns: Large Left
• 2 Columns: Large Right
• 3 Columns: Equal
• 3 Columns: Large Center
• 4 Columns: Equal
• 5 Columns: Equal