Opens in a new tab
Log inStart free

Text media · Steps

A three-step process section for Bricks Builder with a photo above each step and a dashed path that zigzags from one step's number to the next. Point at any step and its number fills with color, in a removable class. Built on the FBK Intro component, so each step's title and text stay editable from the panel.

Dark mode readyHow to use it

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

In the annual plan, $99/year. See plans

Preview

Template details

What’s inside

The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.

  • FBK Image

    A photo with proportion, shape, decoration, border and an optional caption.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Steps, class fbk-mdsteps

Steps: the space between them (the path runs in it), photo heights, number size and path color

--fbk-t-gap
clamp(var(--space-l), 10vw, 10em)
--fbk-t-tall
15em
--fbk-t-short
11em
--fbk-t-dot
2.25em
--fbk-t-line
var(--fbk-highlight-accent, var(--fbk-accent))

Where the path starts (on the tall photos), where it runs (under the short ones) and its corner radius

--fbk-t-y1
2.5em
--fbk-t-y2
calc(var(--fbk-t-short) + 2.75em)
--fbk-t-ymid
calc((var(--fbk-t-y1) + var(--fbk-t-y2)) / 2)
--fbk-t-curve
1.25em

Every setting, step by step, in the docs

Replaces

In Fancy Bricks 1.0 and 2.0 this was Content (1.0).

More like this

See all Features templates