Our Approach Card — Free Flip Card Component for Framer

THINKTANK · FRAMER COMMUNITY · FREE

Practical Ui Our Approach Cards

A single flip card for any step-based process such as discovery, methodology, features, roadmaps. Place as many as you need, side by side. Fully light and dark mode aware, on canvas and in the browser.

System · Light · Dark Aware

How to Use →

01 — Media (Default)

Each card is a single component instance — place any number side by side. Front media accepts a still image, or generates on-brand art automatically if left empty.

DiscoverLook wider before going deeper

Discover

We start in the open — talking to users, mapping the competitive field, and surfacing the assumptions nobody's tested yet. The goal isn't answers yet, it's a sharper set of questions.

DefineTurn noise into one clear brief

Define

Research only matters once it's decided something. We synthesize everything we've heard into a single problem statement and a definition of success the whole team can rally behind.

DesignDiverge wide, converge with conviction

Design

Multiple directions get explored in parallel, stress-tested against real constraints, and narrowed down — not by opinion, but by how well each one actually solves the defined problem.

DeliverShip, then keep earning trust

Deliver

Launch is where the real learning starts. We track how the thing performs in the wild and fold that evidence straight back into the next iteration — fast, deliberate, never final.

02 — Icon / Vector

Switch Visual Type to Icon for a set of built-in vector presets, or upload your own SVG with independent color and size controls.

ExploreScan the landscape widely

Explore

Before narrowing in, we map the terrain broadly — competitors, precedents, and adjacent categories worth learning from.

AimPick the target worth hitting

Aim

With the landscape mapped, we choose the single most important problem to solve first, and define what success looks like for it.

StructureBuild the system which scales

Structure

We build reusable components and clear patterns first, so the solution holds together as it grows past the first release.

LaunchShip it, then keep pushing

Launch

Launch is a milestone, not a finish line — we track real usage after release and keep refining based on what we learn.

ExploreScan the landscape widely

Explore

Before narrowing in, we map the terrain broadly — competitors, precedents, and adjacent categories worth learning from.

StructureBuild the system which scales

Structure

We build reusable components and clear patterns first, so the solution holds together as it grows past the first release.

AimPick the target worth hitting

Aim

With the landscape mapped, we choose the single most important problem to solve first, and define what success looks like for it.

LaunchShip it, then keep pushing

Launch

Launch is a milestone, not a finish line — we track real usage after release and keep refining based on what we learn.

03 — Without Step Numbers

Turn off Show Step Number for a plain feature-card look — the same component works well outside of numbered processes too.

OnboardingA first run that actually sticks

Onboarding

Guided first-run flows that get people to their first real win fast, instead of dropping them into an empty dashboard.

InsightsNumbers that change decisions

Insights

Dashboards built around the handful of metrics that actually change what the team does next week, not vanity charts.

AutomationRemove the busywork

Automation

The repetitive parts of the workflow run themselves, so the team spends their time on the parts that actually need a person.