ThinkTank · Practical Ui Card
How to Use This Component
Seven things worth knowing before you drop this card into your own project — from first insert to fine-tuning how it behaves on a phone.
1
Drop it in
Insert Practical Ui — Our Approach Card from your Insert panel, or paste its component URL into any Framer project. Place as many instances as your process needs — three, four, six, however many steps you have.
2
Write your content
Each card takes a Step Number, Title, Front Note (the short teaser shown before the flip), and Back Text (the fuller explanation shown after). Back Text clips gracefully after six lines, so keep it tight rather than relying on the clip.
3
Choose a visual
Switch Visual Type between Media and Icon / Vector. Media accepts an uploaded Cover Image or a pasted image URL — and shows generative on-brand art automatically if you leave it empty. Icon / Vector gives you five built-in presets or your own uploaded SVG, recolored automatically to match Icon Color.
4
Match your brand
Accent Color drives everything — icons, badges, hover glow, and the back face's gradient. In light mode you also control Card BG, Title, Front Note, Border, Back BG, Back Title, and Back Body directly. Dark mode switches to its own curated palette automatically, following your visitor's real system setting.
5
Size it, and let it breathe
Card Height sets the natural width-to-height ratio; Min Height and Max Height keep it from ever looking too squat or too tall. The card stretches fluidly with whatever width your layout gives it, with extra tightening built in at tablet and phone widths — so a page full of cards never turns into an unreasonably long scroll on mobile.
6
Turn the numeral on or off
Show Step Number toggles the numbered badge on or off. Turn it off for a plain feature-card look — the same component works just as well outside of numbered processes, for feature grids, service lists, or FAQs.
7
Let people interact
Cards flip on click or tap, and are fully keyboard-accessible — Tab to focus, Enter or Space to flip. A soft cursor-tracked tilt plays on hover on desktop. Reveal on Scroll is on by default with an optional per-card delay, so a row can stagger in as a visitor scrolls to it — turn it off for anything above the fold.
Still stuck?
See the live Media, Icon/Vector, and numeral-off variants on the demo page, or reach out through the Framer Community listing.