ThinkTank · Practical Ui Card
How to Use This Component
A quick guide to every property control on the card — what each one does and how to set it up.
1
Add the Card
Paste the component onto any page or inside a Stack. It ships with example content in every field, so a fresh paste never looks broken or empty — just edit what's already there.
2
Choose a Variant
Full includes a cover media area plus a Challenge / Approach / Outcome breakdown. Compact drops the media and shows one summary line — better for dense grids of cards.
3
Add Your Content
Title, Subtitle, up to 3 Tags, and — in Full variant — Challenge, Approach and Outcome. Add a Cover Image, GIF, or Video URL for the media area; leave it empty and you'll see an "Add Cover Image" placeholder instead of a blank box.
4
Set Up the CTA
Label, URL, three styles (Text / Filled / Outline), an optional arrow or diagonal icon, a custom color, and corner radius — all as property controls, no code editing needed.
5
Pick a Theme
System (Auto) follows whatever the page it's placed on actually looks like — light or dark. Light and Dark force one mode regardless of the page. In Light mode you get nine individual color pickers; Dark mode uses a fixed, curated palette so it always looks intentional.
6
Adjust Hover & Press
Toggle "Hover Effect" on or off. Adjust Hover Lift, separate Shadow colors for light and dark (dark needs a stronger shadow to actually read against a dark background), Shadow Blur/Spread/Offset, and how much the card shrinks on Press.
FAQ
Can I unlink or detach the component?
Yes. This component ships unlocked, so you can detach it and edit the internal layers directly if you want to go beyond what the property controls offer.
Dark mode isn't showing on the canvas — is that a bug?
No — Framer's canvas doesn't always reflect how a page truly looks. Check Preview or the published site instead; System theme reads the actual page background there.
My Cover Image area looks empty — is something broken?
No — that's the placeholder label reminding you the field exists. Add an image in Cover Image (or a URL in Video, if using Video mode) and it replaces the placeholder.