Introduction
Create a streamlined system for organizing and displaying tags with this Tags Organizer Component for Framer. Designed for CMS-driven projects, this component transforms a plain text field (e.g., "Tag1, Tag2, Tag3") into individual, fully customizable label tags. Ideal for blogs, product filters, or portfolios, it ensures seamless integration with Framer’s CMS while maintaining design consistency.
Component Features
Flex-Wrap Alignment & Layout
Control how tags flow and align:
Alignment: Choose
Left,Center, orRightalignment for labels.Gap Control: Adjust spacing between labels.
Responsive Wrapping: Labels wrap to new lines while maintaining alignment.
Customizable Label Styling
Design labels to match your brand:
Border & Radius: Set border width, color, and radius.
Inner Stroke: Add a 1px inner border with color control for depth.
Padding: Fine-tune padding for each side (top, right, bottom, left).
Font & Colors: Customize text styles, background fill, and text color.
Tag Links
You can set individual tag links through the built in controls, either by inserting links manually or creating a CMS field where you delimit the links the same way as you would with the tags. The links are automatically applied to their respective tag order and if no links are present then the tags simply don't have the link attribute.
If you want to use external links in your tags you have to use http:// or https:// otherwise they will be interpreted as internal links.
SEO-Friendly Structure
Labels are rendered as semantic HTML elements, improving accessibility and search engine visibility.
How to Use
Create a Text field in your Framer CMS (e.g., "Tags")
Enter tags as a comma-separated string (e.g.,
"Webdesign, Framer, Responsive")Add the Tags Organizer component to your CMS template or page
Bind the CMS field to the component’s
SourcepropertyDone, that's it