Content App | Web Components Guide
Media Components
Various options for image displays on web pages. Usually column-based layouts with the number of columns denoted by the "max" number of images per row.
These modules tend to have a few common attributes for customization.
Note: Lightboxes use 'groups' to define which images are available in the slideshow view. Because all of the following images are located within the same accordion component, they fall under the same group, and thus they are all listed in the slideshow view for this module. This is not a normal use for the accordions, so will not usually be an issue.
Full Width Images have a couple options for display. Namely, their 'hotspot' can be selected from: Center (default), Top-Left, Top-Center, Top-Right, Middle-Left, Middle-Right, Bottom-Left, Bottom-Center, and Bottom-Right.
Note that this single-image component spans the entire horizontal width of the container (no gutters for spacing) and does not allow for multiple images to be added.
A component for single image display. Provides a lightbox to view images by default (popup with grey screen overlay) and a caption generated by the caption input.
Adding more images to this component will create a single column of images which spans the full width of the container with gutters for spacing on each side.
Component for dual image display. Provides a lightbox to view images by default (popup with grey screen overlay) and a caption generated by the caption input.
Like the other "Image(s) max. # per row" modules, images are aligned from left-to-right. In this component, each image will span half the width of the container. Adding more than 2 images will create new two-column rows as necessary.
Component for three-image display. Provides a lightbox to view images by default (popup with grey screen overlay) and a caption generated by the caption input.
Like the other "Image(s) max. # per row" modules, images are aligned from left-to-right. In this component, each image will span a third of the container's width. Adding more than 3 images will create new three-column rows as necessary.
Component for four-image display. Provides a lightbox to view images by default (popup with grey screen overlay) and a caption generated by the caption input.
Like the other "Image(s) max. # per row" modules, images are aligned from left-to-right. In this component, each image will span a quarter of the container's width. Adding more than four images will create new four-column rows as necessary.
Various options for video displays on web pages. Usually one-column or two-column layouts with a video and text.
These components tend to have these fields in common:
Like Full Width Images, Full Width Videos have an available title and description input, and the video spans the entire width of their container.
Left-hand column for text inputs (Title, description, optional CTA, etc).
Right-hand column for video box
Left-hand column for text inputs, and consumes about 2/3 of the container.
Right-hand column for video box, consumes about 1/3 of the container.
Left-hand column for video box.
Right-hand column for text inputs.
columns span equal widths.
Left-hand column for video box, spans about 1/3 of the container.
Right-hand column for text inputs, spans about 2/3 of the container.
Three or Four-column icon lists. These components are separated into two sections. The top section is similar to the Text Only module located at Content App > Core Components > Basic Content > Text Layouts. The second section is a list of icons that have the following fields:
Icons listed horizontally with a maximum of 3 icons per row. More Icons will wrap to a new line with a centered horizontal alignment. Icons can have an image/icon, heading, and text area.
Icons listed horizontally with a maximum of 4 icons per row. More Icons will wrap to a new line with a centered horizontal alignment. Icons can have an image/icon, heading, and text area.