Docs
Download free

Content widget

Steps

A “How it works” row of numbered steps joined by a line. Stacks neatly on phones.

See it live
Read the docs

Build it with your AI

“Add a four-step “How it works” section: brief, plan, review, launch.”

Live demo

See it working

This is the real widget, not a picture

  1. Share your brief

    Tell us about your goals, audience and timeline in a short form.

  2. Get a tailored plan

    We map pages, content and milestones within two business days.

  3. Review the design

    Comment right on the draft until every detail feels right.

  4. Launch

    We run the go-live checklist, redirects and analytics setup.

Settings

28 settings in three tabs

Every setting below is in the editor — and available to your AI through get_widget_schema.

Content

8 settings

Steps

Steps

Title HTML tag

Layout

Direction

Stack vertically on

Alignment

Marker

Numbering

Connector line

Design

20 settings

Spacing

Space between steps

Space between marker and text

Marker

Size

Border

Border radius

Shadow

Number typography

Icon size

Background

Number / icon color

Connector

Color

Thickness

Style

Gap to marker

Text

Title typography

Title color

Title spacing

Description typography

Description color

Text max width

Behaviour

shared

On every element

Spacing & position

Background & border

Animations

Motion & effects

Scroll & mouse effects

Visibility

Conditions

Interactions

Attributes & CSS

Build it with AI

Just describe what you want

Your AI looks up the Steps settings over MCP and writes the element for you — real, editable and on brand.

Claude · connected to your site

You

Add a four-step “How it works” section: brief, plan, review, launch.

Claude · using Uncoder

Done — it’s on your site and fully editable.

  • Steps added where you asked
  • Styled with your Design System
  • Checked on tablet and mobile
  • get_widget_schema
  • edit_elements
  • audit_page

What the AI writes

steps.jsonJSON
{ "type": "steps", "settings": {  } }

More content widgets

Works well with

All widgets

Breadcrumbs

Shows visitors where they are — Home › Blog › Post — and tells Google too, with structured data.

Code Highlight

Code in a tidy block with a file name, line numbers, highlighted lines and a copy button.

Loop Carousel

Your posts, products or any content, in a carousel of cards you design yourself.

Loop Grid

Your posts, products or any content in a grid of cards you design yourself, with pagination or load more.

Posts

A ready-made grid or list of posts with images, dates and excerpts.

Table

Data and comparison tables with striped rows, a sticky header and a caption.

Free · GPL · No account

Your next site is one prompt away

Install Uncoder, connect your AI and describe what you want. Every page it builds stays yours to edit.

Download Uncoder
Read the docs