Image/Feature

The Image/Feature component is designed to capure attentionand drive engagement by linking to high-value actions across the site. It combines an image with a text bubble overlay, ensuring both strong visual impact and clear messaging.

Style System Options

Text Bubble alignment

• Left
• Right

Text Bubble background colors

• Blue
• Green
• Yellow
• Orange
• Dark Purple
• Light Purple

Image Specs

• 16:9 image displayed

• Max css resolution 848 x 477

• Source resolution at least 2x

Character Count Specifications

• Headline: Live text (Approx. 49 characters, 2 lines max)
• Body Copy: Live text (Approx. 157 characters, 3 lines max)

Best Practices

✅ Use for:

• Promoting key calls-to-action (e.g., “Sign Up,” “Learn More,” “Get Started”).
• Highlighting major content areas or campaigns.
• Driving users toward priority destinations on the site.

❌ Avoid:

• Overloading the component with lengthy copy — keep it concise and action-oriented.
• Using images that compete with or obscure the text bubble.
• Inconsistent text bubble colors within the same section (limit variation for clarity).

Visual Guidelines

✅ Do

• Pair strong, relevant imagery with short, action-driven text.
• Keep headline and body copy within defined character limits.
• Use background colors that provide sufficient contrast for accessibility.

❌ Don’t

• Use text baked into the image.
• Stretch or distort images 
• Place multiple Image/Feature components together without clear hierarchy.

Style System: Right aligned & Dark Purple BG