CTA Image

Component Overview

This versatile component displays a title, subtitle, overview, and a CTA button, with flexible styling options to emphasize either content or the image. It supports various image sizes and placements, enabling distinct visual effects.

Styles

• Content Focused: Image is contained and sized to complement content.
• Image Focused: Image displays at full size for maximum visual impact.
• Image Full Width: Image stretches the full device width, creating a 'Billboard' effect.

Message Orientation Options

• Top
• Bottom
• Center (Centered on mobile)
• Left (Centered on mobile)
• Right (Centered on mobile)

Mobile Image

Optionally specify a separate image for mobile devices to optimize layout. For Center, Left, and Right orientations, a vertical image is recommended to prevent overlap of the text and image content.

SVG Image

Optionally specify a SVG Image from the Sanity media library. Currently used on our Stellar site.

Notes

• Typically used with just Title and Overview, omitting the subtitle for simplicity and clarity.