Content Component

The content component (also known as the consolidated content component) is our most used component. This component is our main component for displaying most any type of textual or visual content. The content component uses the consolidated content data source to store its content in the tree. The content component has multiple compatible renderings for different structural layouts as well.

Below are 2 examples of the content component. The first is in a Highlight Section Component and using the horizontal layout with the image to the left. The second is a default vertical layout in a narrow frame.

Adding a content component and selecting a layout

The content component can be added to most, if not all, available placeholders. Click the placeholder where you’d like to add the content component and select the content component layout from the list available for that placeholder.

The following layouts are available for the content component:

Image above text*

Image below text

Image to the left of the text*

Image to the right of the text*

*: A clickable image variation is available for this layout.

The content component layouts are interchangeable if the layout is available within the placeholder. Follow the steps below to change layouts.

Select the component that you are editing to load the component control bar.
On the component control bar, click the Replace with another component button. This will open the Replacement Rendering dialog. This dialog will contain all the available layouts that you can use to replace the current component.

Editing the component

The following fields are available and editable on the Content Component. All fields are optional & will not display on a published page unless filled with content.

Image or Video selector – This toggle is used to select whether you’re adding a static image or an embedded video. Image is the default state.
Image – Used for adding a static image.
Eyebrow text – This is a small text that is placed above the main heading text.
Heading 1 text – Main heading text. Defaults to an H1 element & style. **
Heading 2 text – Secondary heading text. Defaults to an H2 element & style. **
Basic text – This is a rich text editing field used to add basic formatted text.
Action links – These are used to add links to the Content component. ***

The Content component placeholder works like any other, but only supports the insertion of specific components that can be used in conjunction with the content component.

**: The styling & wrapping element of this text can be adjusted in the component properties.
***: How links are displayed can be adjusted in the component properties.