Inset Media Container

The Inset Media Container pairs a media element (image or video) with descriptive text and clear call-to-action links. This component is ideal for highlighting important content, supporting storytelling, and guiding users toward key actions.

Style System Options

Image Position

• Left
• Right

Image Corner Rounding

• Rounded (Default)
• No Rounding

Media Styles

• Style A - Image is aligned with copy
• Style B - Image is offset slightly to complement copy to the right or left (Note: Background color to be applied at the Column Control Level for this option)

Text Alignment

• Top
• Center

Content Guidelines

• Card Title: Short and engaging (1–2 lines).
• Card Description: Concise and informative, ideally 2–4 lines.

CTAs:

• Use clear, action-oriented labels (Learn More, Get Started).

Image Specs

• 16:9 image recommended
• Aspect ratio is not enforced
• Max css image width 729px (portrait tablet)
• Source resolution at least 2x

Best Practices

✅ Use for:

• Highlighting features, services, or campaigns with supporting visuals.
• Breaking up long content areas with engaging media and clear CTAs.
• Creating visual hierarchy through alternating layouts (image left/right).

❌ Avoid:

• Overloading the container with excessive copy or too many links.
• Using low-quality or irrelevant media that doesn’t support the message.
• Mixing inconsistent corner rounding or styles across the same page.

Visual Guidelines

✅ Do

• Keep text concise and aligned with the selected text alignment option.
• Apply consistent corner rounding across similar containers for cohesion.

❌ Don’t

• Stretch or distort media assets to fit the container.
• Place text directly over media unless specifically designed for it.