5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8fa,

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

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

Ideal For

Hero headlines with emphasized introductions
Feature sections with bold labels and descriptive text
Testimonials with highlighted quotes
Product descriptions with standout benefits

After purchase, you’ll receive a Remix link with the component. Please note: due to this being a digital product, refunds are not possible.

5a:[["$","$L5d",null,{"post":{"id":"019c4e5a-874d-778b-abc4-e7c55ca6ccc5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e3356518-ac54-4be0-8d06-ab3638afb555","name":"Chevis Zhou | AethrDesign","slug":"chevis-zhou","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/51478/avatar-6lAergXiN4HxgSZq1WEB9Tw6XL17OB.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"VkbRY2dLVbZl10HxpbcZ","resolved":true,"title":"DualStyleText","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Overview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent Text Styling: Apply different fonts, weights, sizes, colors, and opacity to two text segments within the same line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"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"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full Typography Control: Leverage Framer’s extended font controls including responsive font sizes across breakpoints"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Semantic HTML: Choose between H1-H6 or paragraph tags for proper document structure and SEO"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility Built-in: ARIA labels and heading roles ensure screen readers properly announce your content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text Wrapping: Text Part 2 uses CSS text-wrap: pretty for optimal line breaks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS-Ready: All text fields support direct CMS binding for dynamic content"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Your HTML Tag: Choose the semantic tag (H1-H6 or P) that matches your content hierarchy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Style Each Text Part: Use Font Part 1 and Font Part 2 controls to set typography, including responsive sizes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add an Image (Optional): Upload an inline image and adjust its height, spacing, radius, and vertical offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune Appearance: Control opacity and color for each text segment independently"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust Spacing: Use Image Left Padding to align your text, even when no image is present"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Ideal For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines with emphasized introductions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature sections with bold labels and descriptive text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Testimonials with highlighted quotes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product descriptions with standout benefits"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"After purchase, you’ll receive a "},{"type":"text","text":"Remix link","marks":[{"type":"bold"}]},{"type":"text","text":" with "},{"type":"text","text":"the component. ","marks":[{"type":"bold"}]},{"type":"text","text":"Please note: due to this being a digital product, refunds are not possible."}]}]},"introduction":"Two styles, one text. Inline image","slug":"dualstyletext","author":{"framerUserId":"e3356518-ac54-4be0-8d06-ab3638afb555","name":"Chevis Zhou | AethrDesign","slug":"chevis-zhou","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/51478/avatar-6lAergXiN4HxgSZq1WEB9Tw6XL17OB.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/VkbRY2dLVbZl10HxpbcZ/dualstyletext-ixZ5DNK2OLE0chXpVkYuCesnrHXyjO","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-31T00:03:07.297Z","updatedAt":"2026-09-10T23:45:54.124Z","publishedAt":"2026-02-11T20:18:01.677Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dualstyletext.framer.website/preview","price":"5","paymentUrl":"https://buy.stripe.com/8x26oIdUV7Bd3DKeMA8Vi03","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"7pib60djEw1R03V7w7cS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-11T20:18:01.677Z","updatedAt":"2026-02-11T20:18:01.677Z","reported":false}}],"$L5f"]

Suggested for you