Layout & Design

Adding Inline Links as Overrides in Framer

Justin

4:27

3.2K views

Dec 30, 2025

About this lesson

Learn how to add inline links inside Framer components using overrides and formatted text. We’ll cover when link overrides work, why they break for text, and how to style and manage inline links inside components like Accordions.

Remix Link: https://framer.com/remix/5yTWbeHGxP7CirdXYb9W

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=0s Introduction

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=29s Adding Links as Overrides

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=80s Links Inside Text Blocks

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=98s The Anatomy of the Accordion Component

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=154s Adding Inline Links

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=209s Updating Link Styles

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=237s Adding More Formatted Text Styles

https://www.youtube.com/watch?v=4Dclbf3yY7M&t=244s Wrap Up

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Link overrides in Framer let us turn 0:02instances a button or card components 0:04into their own [music] unique link 0:06elements. But when we need to add a link 0:08override somewhere within [music] a 0:10single block of text, things work a bit 0:13differently. So in this video, we'll 0:15cover two things. How to create [music]0:17a basic link override and how formatted 0:20text variables let us override blocks of 0:22text [music] that include inline links.0:28First, let's quickly walk through how to 0:30set up a standard link override. Here,0:33I've created a simple button component 0:36that I want to reuse throughout my 0:37design, but I also want to be able to 0:40change the link wherever this button is 0:42used. To do that, I'll select the 0:45primary variant, head over to the link 0:47properties, and click link to. From 0:50there, I'll choose create variable,0:53which lets us assign different links to 0:55each instance of the component. So now,0:58if we go back to the canvas, we'll 1:01notice that each instance has its own 1:03link property in the properties panel.1:06This approach works really well for 1:08buttons where the entire element should 1:10be clickable, but because it applies a 1:12single link to the entire element, it 1:15doesn't work if we want only part of the 1:17block of text to link somewhere else.1:20So, for elements like this accordion 1:22that expands to reveal a whole sentence 1:24or paragraph, I may want to add a link 1:27to specific words or strings of text.1:30This also applies to things like help 1:33documentation, legal copy, and other 1:36CMS-driven content. And before we go any 1:39further, let's quickly take a look at 1:41how this accordion component is put 1:42together.1:44As we can see in the layers panel, each 1:46row in the accordion is made up of the 1:49same question component reused multiple 1:51times. And when I open up the question 1:54component, we can see it has two 1:56variants, open and closed, which control 2:00whether the answer content is visible or 2:02not. Now, if we head back to the 2:04accordion level, we'll see that the main 2:07component is handling which question is 2:09open and which ones are closed. It uses 2:13variants to switch between states. So 2:15when one question is interacted with,2:17the correct question component toggles 2:19to its open variant while the others 2:22remain closed. This setup gives us a 2:24clean reusable structure. But right now 2:27the answer content inside each question 2:30is still just plain text, which means we 2:32can't add inline links yet. So we'll 2:34need to update the question component 2:36itself to support these types of links.2:39To do that, I'll doubleclick any of the 2:42question components to open it up. From 2:44here, I'll select the text within my 2:46answer stack and head over to the text 2:48properties. Click on content, then 2:51create variable, and select formatted 2:54text. Choosing formatted text gives us 2:57support for rich content, meaning we can 2:59add links to individual words or phrases 3:02inside a block of text, something a 3:04plain text field just can't do. With 3:07that set, we'll head back to the main 3:08accordion component and select one of 3:10the question instances. Now, if we take 3:13a look at the properties panel, we'll 3:15notice that the answer field now 3:16includes an edit content button where we 3:19can add our answer, highlight any word 3:21or phrase, and use the link icon to add 3:24a link to just that portion of the text.3:28And after adding a link, we can 3:30fine-tune how it looks by editing the 3:32default link style within the assets 3:34panel. Or if we double click back into 3:37the question component, we can access 3:39the link style from the text properties.3:41From here, we can change the color, add 3:44a text decoration, define hover or 3:47current states, and more. Keep in mind 3:50that this style will be shared by any 3:52links we add inside the answer variable,3:54which keeps all of our links looking 3:56consistent. We can also add more styles 3:59of formatted text from here by simply 4:01clicking on the plus icon next to our 4:03text properties. And that's it. Now you 4:06know that when a link needs to live 4:08inside a block of text, [music]4:09formatted text is the right tool for the 4:12job. This approach keeps your components 4:14flexible, clean, and scalable. Thanks 4:17for watching, and as always, I'll see 4:19you [music] in the next video.

TeachesLinks Variables

Also coversComponent Variants Components Hover & Press Stacks

Watch on YouTube ↗

‹ Making elements revolve in Framer

Transferring Framer projects to clients ›