Component
Interactive Lanyard Component for Framer



About the resource
To use this component on your website, all you need to do is copy and paste it into your project and customize the look of it with the right property controls.
I recommend using this element with absolute position, pinning it to all sides, so it’s either above or below the content within the section.
About the resource
To use this component on your website, all you need to do is copy and paste it into your project and customize the look of it with the right property controls.
I recommend using this element with absolute position, pinning it to all sides, so it’s either above or below the content within the section.
About the resource
To use this component on your website, all you need to do is copy and paste it into your project and customize the look of it with the right property controls.
I recommend using this element with absolute position, pinning it to all sides, so it’s either above or below the content within the section.

Absolute positioning with pins on the right panel.

Absolute positioning with pins on the right panel.

Absolute positioning with pins on the right panel.
You can customize almost everything about this component. Adjust the appearance with Card, String, and Clip colors, upload Front and Back images, and fine-tune physics settings like Gravity, Distance, and Lighting for a realistic effect. The Interactive toggle enables click-and-drag functionality, while Sizing options (Fit, Fill, Stretch) ensure your images display perfectly.
You can customize almost everything about this component. Adjust the appearance with Card, String, and Clip colors, upload Front and Back images, and fine-tune physics settings like Gravity, Distance, and Lighting for a realistic effect. The Interactive toggle enables click-and-drag functionality, while Sizing options (Fit, Fill, Stretch) ensure your images display perfectly.
You can customize almost everything about this component. Adjust the appearance with Card, String, and Clip colors, upload Front and Back images, and fine-tune physics settings like Gravity, Distance, and Lighting for a realistic effect. The Interactive toggle enables click-and-drag functionality, while Sizing options (Fit, Fill, Stretch) ensure your images display perfectly.

The lanyard component properties.

The lanyard component properties.

The lanyard component properties.
You’ll find two placeholder frames where you can design your own card and string, then export those as images and upload to the component.
You’ll find two placeholder frames where you can design your own card and string, then export those as images and upload to the component.
You’ll find two placeholder frames where you can design your own card and string, then export those as images and upload to the component.

Design your card and string, then export and upload to component properties.

Design your card and string, then export and upload to component properties.

Design your card and string, then export and upload to component properties.
Quick note: the export option is only available on the desktop app.
Quick note: the export option is only available on the desktop app.
Quick note: the export option is only available on the desktop app.