Pricing · Plans
A pricing table for Bricks Builder with three plan cards, each showing its price, features, a note and a button, with the middle plan featured. Built on the FBK Card, FBK Check list and FBK Price components for a clean, comparison-ready layout.
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.
- FBK Button
A link styled as a button, with style, size and width.
- FBK Card
A media slot, title, text, a content slot and an actions slot.
- FBK Check item
One row of an FBK Check list: the house check mark and a short text.
- FBK Check list
A list of checks in the Fancy Bricks style families.
- FBK Intro
Eyebrow, title, lead and an actions slot for buttons.
- FBK Price
A price: currency, a large figure, a period, an optional old price and a note.
Adjust it
Change these variables in Bricks to tune it; everything else follows your framework.
On the element Plans, class fbk-plans
Featured plan: frame color (the badge is the common tag, Solid · Brand)
- --fbk-t-accent
- var(--primary)
The line between features in the included-features list
- --fbk-t-line
- color-mix(in srgb, var(--base-ultra-dark) 12%, var(--white))
- --fbk-checks-line
- var(--fbk-t-line)
Hover fill (class .fbk-plans__plan--fill): the color that fills the card from the bottom
- --fbk-t-fill
- var(--base-ultra-dark)
Motion (zero specificity: the reduced-motion rule, which Bricks moves up, wins)
- --fbk-t-fill-time
- var(--fbk-hover)
Replaces
In Fancy Bricks 1.0 and 2.0 this was Pricing table (1.0).
