Dribbble Card Options

Dribbble feed components have three groups of visual props

Written By Social Hampster

Last updated 2 days ago

Dribbble feed components have three groups of visual props: card options (what information shows on each shot card), overlay options (the hover effect over each card), and footer options (a bar below each card for title and stats). All of these are available in Framer's right-side props panel when a Dribbble component is selected.

How to access: Click on your Dribbble Grid, Masonry, or Slider component in Framer. The Dribbble-specific props appear in the props panel on the right side of the editor.

[Screenshot: Add screenshot of the Dribbble card props in the Framer props panel]

Card options

These props control which pieces of information are shown on each Dribbble shot card:

Prop name	Type	What it does	Notes
Show Title	Toggle	Displays the shot title on or below the card	Useful for portfolio presentations where the shot name provides context
Show Views	Toggle	Displays the view count for each shot	Shows your work's reach on Dribbble
Show Likes	Toggle	Displays the like count for each shot	Shows social proof and engagement

Overlay options

The overlay is a color layer that appears on top of the shot image, either always or on hover. It is commonly used to show the shot title and stats when the visitor moves their cursor over a card.

Prop name	Type	What it does	Notes
Show Overlay	Toggle	Enables a color overlay that appears on hover over each card	When on, the overlay fades in when the visitor hovers their cursor over a card. Works well for revealing the shot title on hover.
Overlay Color	Color	Sets the color of the hover overlay	Use your brand color or a neutral dark color. The overlay sits between the image and any text shown on hover.
Overlay Opacity	Number (0 to 1)	Controls how opaque the overlay color is	0 is fully transparent (invisible). 1 is fully opaque (covers the image completely). Values between 0.4 and 0.7 work well for overlays that show text on top.

Footer options

The footer is a bar that appears below each card (not overlaid on the image). It is a good place to show the shot title and stats in a clean, readable way without obscuring the image itself.

Prop name	Type	What it does	Notes
Show Footer	Toggle	Shows or hides the footer bar below each card	When on, a strip appears beneath the image area containing the title and any stats you have enabled
Footer Background	Color	Sets the background color of the footer bar	Use white or a light neutral to keep things readable. Match your site's card background for a seamless look.
Footer Text Color	Color	Sets the color of the text and stats inside the footer bar	Use a dark color on a light footer background, or white on a dark footer background.

Combining overlay and footer

You can use overlay and footer together or choose just one. A common pattern for portfolio sites is:

Show Footer: on (always visible, shows shot title)
Show Overlay: off (keeps the image clean)

An alternative pattern for a more interactive feel:

Show Footer: off
Show Overlay: on (reveals title and stats on hover)
Overlay Color: dark navy or brand color
Overlay Opacity: 0.6

[Screenshot: Add screenshots showing Dribbble cards with footer only, overlay only, and both combined]