Card Style Option

Card style props control the visual appearance of each post card in your feed

Written By Social Hampster

Last updated 2 days ago

Card style props control the visual appearance of each post card in your feed. These options are available in Framer's right-side props panel when you select a feed component. Use them to match your feed to your site's design system without writing any code.

How to access: Click on a Social Hampster component in Framer. Look for the card style options in the props panel on the right side of the editor.

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

Card style props

Prop name	Type	What it does	Notes
Aspect Ratio	Select or number	Sets the proportional shape of each card	Common values: 1:1 (square), 4:5 (portrait), 16:9 (landscape), 4:3 (wide). Square works well for Instagram and Dribbble. 16:9 works well for YouTube.
Border Radius	Number (pixels)	Rounds the corners of each card	Set to 0 for sharp corners. A value of 8 or 12 gives a modern, softly rounded look. Higher values create pill or circle shapes.
Image Fit	Select	Controls how the post image fills the card area	Cover: the image fills the entire card (may crop the edges). Contain: the full image is always visible, with possible letterboxing.
Background Color	Color	Sets the background color shown behind images or on text-only cards	Useful for Threads or text-heavy feeds. Use a neutral color like #f5f5f5 or match your site background.
Overlay Color	Color	Adds a color layer on top of the card image	Use your brand color here. Works best with Overlay Opacity set to a low value like 0.3 to 0.5.
Overlay Opacity	Number (0 to 1)	Controls how transparent the overlay color is	0 means fully transparent (no overlay visible). 1 means the overlay completely covers the image. Values between 0.2 and 0.6 are most common.
Border Width	Number (pixels)	Adds a border outline around each card	Set to 0 for no border. A value of 1 or 2 gives a subtle outline effect.
Border Color	Color	Sets the color of the card border	Only visible when Border Width is greater than 0.
Shadow	Toggle or select	Adds a drop shadow beneath each card	Adds depth and separation, especially useful on light backgrounds.

Tips for common design styles

Clean minimal look

Border Radius: 8px
Border Width: 0
Overlay Opacity: 0
Shadow: off
Image Fit: Cover

Bold branded look

Overlay Color: your brand color
Overlay Opacity: 0.3 to 0.5
Border Radius: 12px
Shadow: on

Card with border

Border Width: 1px
Border Color: #e5e7eb (light gray)
Border Radius: 8px
Background Color: white or your card background

[Screenshot: Add side-by-side comparison screenshots showing different card style configurations]