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.
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
Set Your HTML Tag: Choose the semantic tag (H1-H6 or P) that matches your content hierarchy
Style Each Text Part: Use Font Part 1 and Font Part 2 controls to set typography, including responsive sizes
Add an Image (Optional): Upload an inline image and adjust its height, spacing, radius, and vertical offset
Fine-tune Appearance: Control opacity and color for each text segment independently
Adjust Spacing: Use Image Left Padding to align your text, even when no image is present
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
After purchase, you’ll receive a Remix link with the component. Please note: due to this being a digital product, refunds are not possible.
Chevis Zhou | AethrDesign
