5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T959,

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
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.

5b:[["$","$L5e",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-aethrdesign","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":"$5f","bodyJson":null,"introduction":"Two styles, one text. Inline image.","slug":"dualstyletext","author":{"framerUserId":"e3356518-ac54-4be0-8d06-ab3638afb555","name":"Chevis Zhou | AethrDesign","slug":"chevis-zhou-aethrdesign","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":"hsl(240 53% 70%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-01-31T00:03:07.297Z","updatedAt":"2026-02-11T18:40:42.115Z","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/4gMdR9eC2fgo7EB8zR3gk07","workshop":false,"categories":[{"id":"e37e310f-bced-42c5-9709-c0a59a28dd3b","name":"CMS","slug":"cms"}],"lastSaveId":"7pib60djEw1R03V7w7cS"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"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}}],"$L60"]

Suggested for you