Dribbble Masonry

Displays your Dribbble shots in a variable-height grid.

Written By Social Hampster

Last updated About 10 hours ago

Displays your Dribbble shots in a variable-height grid. A great choice for designers with shots of different dimensions. Cards take up the natural height of each image, creating a dynamic and editorial-style layout.

Plan: Personal and above

How to Insert

From the plugin: After connecting your Dribbble account, click Masonry in the plugin panel.

From the dashboard: Click Details on your Dribbble feed, click Copy next to Masonry, then paste in Framer.

Props Reference

Prop	What it does	Notes
Feed ID	Links the component to your Dribbble account	Set automatically
Max Shots	How many shots to show
Columns	Number of columns
Gap	Space between cards in pixels
Show Title	Shows the shot title below the card	Toggle
Show Views	Shows the view count	Toggle
Show Likes	Shows the like count	Toggle
Border Radius	Rounds card corners
Image Fit	How images fill the card	Cover or Contain
Overlay Color	Color overlay shown on hover
Overlay Opacity	Opacity of the hover overlay	Value from 0 to 1

Common Issues

The layout looks uneven

This is the expected behavior. Masonry allows each card to take its natural height based on the image dimensions, so cards will vary in height across columns. This is the defining look of a Masonry layout.

Feed not showing on the published site

Whitelist your domain in the Social Hampster dashboard under your feed's Details page.