Muse Home Foundations Components Patterns Templates Resources Support

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

Illustration

SVG

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

Illustration

SVG

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

Illustration

SVG

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

  • 40%
  • 50%
  • 60%

Examples

Examples coming soon