---
title: "Aisol Process Steps — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Aisol Studio · Cards. Aisol Process Steps lays out \"how it works\" steps from a CMS collection — numbered, connected, and readable before any script runs."
canonical: "https://framer.elliotli.dev/component/aisol-process-steps"
---

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

# Aisol Process Steps

How-it-works steps, CMS-ready

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

![Aisol Process Steps preview image 1](https://framer.elliotli.dev/og/component/aisol-process-steps/45deb3b93d0547e0/1600x1200.jpg)

## Summary

Aisol Process Steps lays out "how it works" steps from a CMS collection — numbered, connected, and readable before any script runs.

## Description

Aisol Process Steps lays out "how it works" steps from a CMS collection — numbered, connected, and readable before any script runs.

Steps reveal as they enter the viewport using an observer on the component's own items only; the Framer canvas shows every step already finished.

Reduced motion gets the finished list with no observer at all; keyboard and screen-reader users get a real ordered list with real links.

\- Vertical or horizontal direction; the horizontal rail stacks under a breakpoint you set, and the connector hides itself when it would misalign.

\- Numbers, dots or no markers; a connector line between markers; per-step eyebrow, image, description and a link on the title only.

\- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Steps as an array: eyebrow, title, description, image or image URL, alt text, link — or bind a CMS collection through the step slots

• Direction, stack breakpoint, numbering style, connector on/off

• Reveal on/off, stagger and duration; heading level for step titles; region label for screen readers; empty-state text

• Accent, text, muted, line and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: the reveal runs once per step by design. Step slots pair by index with the steps array.

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

-   All · #9092

## Details

- **Author**: Aisol Studio
- **Price**: $12.00
- **Published**: 2026-09-05
- **Updated**: 2026-10-03
- **Added**: 2026-09-05
- **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