Styling and Theming

Social Hampster components are designed to adapt to your site's visual style.

Written By Social Hampster

Last updated 2 days ago

Styling and Theming

Social Hampster components are designed to adapt to your site's visual style. You do not need to write any CSS. All styling is done through the props panel in Framer when you have a component selected.

All visual customization happens in Framer's props panel. Click any Social Hampster component to select it, then look at the right side of the Framer editor to find all the styling options.

[Screenshot: Add screenshot of a styled Social Hampster component on a Framer canvas with the props panel visible]

Key styling props

The most commonly used styling props across all feed components are:

Prop	What it controls	Typical values
Border Radius	How rounded the card corners are	0 for sharp, 8 for softly rounded, 16+ for very rounded
Gap	Space between cards in the grid or masonry	8, 12, 16, or 24 pixels
Aspect Ratio	The proportional shape of each card	1:1 square, 4:5 portrait, 16:9 landscape
Image Fit	How the post image fills the card	Cover (fills and crops) or Contain (shows full image)
Overlay Color	A color layer on top of card images	Your brand color at low opacity
Overlay Opacity	How visible the overlay is	0.2 to 0.5 for subtle branding
Background Color	Color shown behind images or on text cards	Match your site's card or surface color

Responsiveness

Social Hampster components respond to the width you give them in Framer. The component fills whatever container you place it in. To control how the feed looks at different screen sizes:

Use Framer's built-in breakpoints to adjust the component width at mobile, tablet, and desktop sizes
Reduce the number of columns at smaller breakpoints using the Columns prop (Grid components)
Reduce Max Posts on mobile to keep the page from feeling too long

Tip: A 3-column grid on desktop often works best as a 2-column grid on tablet and a 1-column grid on mobile. Adjust Columns per breakpoint in Framer's responsive settings.

Matching your brand colors

To bring your brand colors into the feed:

Set Overlay Color to your primary brand color and use a low Overlay Opacity (0.2 to 0.4) for a subtle tint on each card
Set Background Color to your card background color so text-only posts (like Threads) blend naturally with your design
Set Border Color to your brand accent color if you are using card borders
Set Arrow Color on Slider components to match your primary button color

Using Framer Variables for colors

Framer supports Color Variables, which let you define a color once and reuse it across your whole project. To connect a Social Hampster component color prop to a Framer Variable:

Click the color swatch next to any color prop in the props panel
In the color picker that appears, look for the Variables tab or token selector
Select one of your project's defined color variables

This is especially useful for dark mode. If your site switches between light and dark themes using Framer Variables, tying the component's background and text colors to those variables means the feed will update automatically when the theme changes.

See also: The Dark Mode article explains how to set up your Social Hampster components to work with Framer's dark mode toggle.

Common styling presets

Clean, minimal feed

Border Radius: 8px
Gap: 12px
Overlay Opacity: 0
Background Color: transparent
Image Fit: Cover

Branded editorial feed

Border Radius: 12px
Gap: 16px
Overlay Color: your brand color
Overlay Opacity: 0.25
Image Fit: Cover

Card-style feed with borders

Border Radius: 8px
Border Width: 1px
Border Color: #e5e7eb
Background Color: white
Gap: 16px

[Screenshot: Add side-by-side screenshots of the same feed in different style presets]