Cards · Steps
A four-step card section for Bricks Builder: a numbered circle over each step, linked by a thin line, with a card holding the title and text below it. Point at a step and its card and circle fill with your brand color while every earlier step along the line fills too, so the eye reads how far along it is.
Dark mode ready
In the annual plan, $99/year. See plans
Preview
Loading demo…
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.
Adjust it
Change these variables in Bricks to tune it; everything else follows your framework.
On the element Steps, class fbk-stepcards
Number circle size and the line between the circles
- --fbk-t-marker
- 3em
- --fbk-t-line
- 2px
- --fbk-t-line-color
- color-mix(in srgb, var(--heading-color) 16%, transparent)
- --fbk-stepcards-cols
- 4
