---
title: "Path Steps — Free Framer component · Best of Framer"
description: "Free Framer component · by Artem Kireev · Cards. Path Steps lays your process out as a snaking sequence of cards and draws a connector line between them as the visitor scrolls."
canonical: "https://framer.elliotli.dev/component/path-steps"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Path Steps

# Path Steps

Process steps on a drawn path

[View on Framer](https://framer.com/marketplace/components/path-steps/?via=elliot-li)

![Path Steps preview image 1](https://framer.elliotli.dev/og/component/path-steps/39601eee8be6955a/1600x1200.jpg)

## Summary

Path Steps lays your process out as a snaking sequence of cards and draws a connector line between them as the visitor scrolls.

## Description

Path Steps lays your process out as a snaking sequence of cards and draws a connector line between them as the visitor scrolls.

The connector is not a static graphic. The component measures the cards after layout and generates the path from their real positions, so it stays correct at any step count, any column count and any card height. Change the gap, add a step, edit a title, or resize the browser and the line regenerates to match. This is the part that is genuinely tedious to build by hand in Framer, where an absolutely positioned SVG has to be re-drawn for every breakpoint.

Responsive behaviour is measured on the component, not the viewport, so the section is also correct when it sits inside a narrow stack on a wide screen. Above the tablet threshold it uses your chosen column count, up to four. Below it, two. Below the mobile threshold, the layout stacks and the same connector collapses into a single vertical line. Both thresholds are yours to set.

Each step takes a title, body text, an optional icon, an optional link, and an auto-numbered badge you can override. Cards are fully styled from the panel: fill, border, radius, shadow, padding, minimum height, alignment, extended font controls for headings and body, and an optional line clamp. The rail has its own controls for colour, track colour and fade, width, corner radius, line cap and a dashed track. Motion controls cover the scroll window the drawing spans, the per-card reveal span and offset, and the hover lift, each of which can be switched off.

The component uses ordered-list semantics with real headings, so screen readers announce step order. Nothing depends on hover. On the Framer canvas, during export, and for visitors who prefer reduced motion, the section renders in its finished state with the path fully drawn and every card visible.

No dependencies, no WebGL, no network calls. Scrolling triggers no React re-renders.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1242

## Details

- **Author**: Artem Kireev
- **Published**: 2026-07-28
- **Updated**: 2026-07-28
- **Added**: 2026-07-28
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator