Features · 3 columns

A centered intro and three features in columns, each with an icon, a title and a short text.

See it live: Features · 3 columns on fancybricks.co — the live preview, and the button that copies it.

Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Features · 3 columns
  Container
    Intro   (FBK Intro)
    Features · List
      Icon item · Set up in an afternoon   (FBK Icon item)
      Icon item · Private by default   (FBK Icon item)
      Icon item · Real people on support   (FBK Icon item)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
3. Select Icon item · Set up in an afternoon, Icon item · Private by default, Icon item · Real people on support (FBK Icon item) › Properties: Icon, Title, Title tag, Text · Show or hide group: Hide icon, Hide text · Style group: Layout, Look, Tone, Shape, Size, Alignment, HTML tag, Background.

Finish by hand

• Each feature is an FBK Icon item (Stacked, Center) in the list (ul): duplicate one to add a feature.
• Columns: on .fbk-wf-feat3 (3, 1 on phones). Icon style: the item's Look, Tone, Shape and Size.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-intro.
• 767px and below — .fbk-wf-feat3, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--light, fbk-section--soft, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.