DualStyleText Framer Component-Two styles, one text. Inline image

Overview

DualStyleText solves a common design challenge: styling different parts of a single text block without creating multiple layers. Whether you need a bold headline followed by lighter body text, or want to add an inline icon to your heading, this component keeps everything in one semantic HTML element while giving you complete typographic control.

Key Features

• Independent Text Styling: Apply different fonts, weights, sizes, colors, and opacity to two text segments within the same line

• Inline Image Support: Add an icon or logo that flows naturally with your text, with precise control over height, spacing, border radius, and vertical alignment

• Full Typography Control: Leverage Framer’s extended font controls including responsive font sizes across breakpoints

• Semantic HTML: Choose between H1-H6 or paragraph tags for proper document structure and SEO

• Accessibility Built-in: ARIA labels and heading roles ensure screen readers properly announce your content

• Text Wrapping: Text Part 2 uses CSS text-wrap: pretty for optimal line breaks

• CMS-Ready: All text fields support direct CMS binding for dynamic content

How to Use

1. Set Your HTML Tag: Choose the semantic tag (H1-H6 or P) that matches your content hierarchy

2. Style Each Text Part: Use Font Part 1 and Font Part 2 controls to set typography, including responsive sizes

3. Add an Image (Optional): Upload an inline image and adjust its height, spacing, radius, and vertical offset

4. Fine-tune Appearance: Control opacity and color for each text segment independently

5. Adjust Spacing: Use Image Left Padding to align your text, even when no image is present

Ideal For

• Hero headlines with emphasized introductions

• Feature sections with bold labels and descriptive text

• Testimonials with highlighted quotes

• Product descriptions with standout benefits

• Any text block requiring mixed typographic styles in a single, semantic element