Text Overlay

The Text Overlay component allows you to place text directly on top of an image, video or background color. This is useful for heroes, callouts, promotional messages, or visual storytelling where the message and image work together as a unified piece of content.

It is flexible in layout and supports theming options to ensure readability across light and dark backgrounds.

Anatomy

The Text Overlay component includes the following configurable elements:

Background Media (optional) – The image or video behind the text content.
Background Color (optional) – Solid color used in place of or layered under the image.
Text Block: Includes:
- Pretitle (optional)
- Title (optional)
- Description (optional)
- Call-to-Action (CTA) (optional)

Usage

Use the Text Overlay component when you want to:

Combine imagery and messaging in a single, visually compelling layout.
Call attention to a key action or announcement.
Maintain visual hierarchy without introducing separate image and text components.

Avoid using this component when:

You require fine-grained control over layout columns or multiple content modules.
The text is long-form or requires structured formatting (consider using Content Container instead).

Recommended Image Specifications

Variation	Image type	File type	Dimensions (Recommendations)	Focal point
Top	UI screen, Screen on device, Product silhouette, Lifestyle, Video thumbnail	JPG, PNG Note: use PNG for transparent backgrounds Individual image file sizes should be under 1MB if possible.	MD-LG: 2400px X 1028px [21:9] SM: 1600px X 900px [16:9] XS: 900px X 506px [16:9] For MD-LG: Please ensure the image is Dark or Light enough within the image in the location where the text will go so that the text is fully legible.	Center and middle
Top	Illustration	SVG		Center and middle
Top Short	UI screen, Screen on device, Product silhouette, Lifestyle, Video thumbnail	JPG, PNG Note: use PNG for transparent backgrounds	MD-LG: 2400px X 570px [21:5] SM: 1600 x 685 [21:9] XS: 900 x 385 [21:9] For MD-LG: Please ensure the image is Dark or Light enough within the image in the location where the text will go so that the text is fully legible.	Center and middle
Top Short	Illustration	SVG		Center and middle
In-page	UI screen, Screen on device, Product silhouette, Lifestyle, Video thumbnail	JPG, PNG Note: use PNG for transparent backgrounds	MD-LG: 2400x800 [21:7] SM: 1600px X 900px [16:9] XS: 900px X 506px [16:9] For MD-LG: Please ensure the image is Dark or Light enough within the image in the location where the text will go so that the text is fully legible.	Center and middle
In-page	Illustration	SVG		Center and middle
Open Graph	OG image should match the imagery used in the hero	JPG	1200px X 630px	Center and middle

MD-LG: 21:5 min-height for both Top/In page
XS-SM: 21:9 min-height for both Top/In page
If a smaller image is uploaded, the image should fill in the space
Component will grow taller based on image or content
Solid background color will also follow the same min-heights for Top/Inpage
Focal point: If the container grows taller or a single image is used across all breakpoints, the image should anchor to the right on MD-LG, and anchor center on XS-SM.

Dialog Settings

In the authoring dialog, you’ll find the following key settings:

Context

Top of Page: sets the display styles to work best for “Hero” type content, also adjust what’s rendered in the DOM for SEO purposes.

In page: sets the display styles to work best for content within a page, not a hero. Spotlights, Demos, or creating a “river” of media and text down a page would use this setting.

Theme

Inherit
Light
Gray
Dark

Background Type

Image
Video
Solid Color (inherits from the theme setting)

Text Position

Left
Right (not supported with Solid Color background)
Center

Text Width

Text Width can be adjusted only on Left or Right Text Positions

Examples

Examples coming soon