Opens in a new tab

Cards · Icon

An icon card grid for Bricks Builder: six cards with an icon in a soft square, a title and a short line of text. On hover, the square fills the whole card with your brand color, built on the native FBK Card grid. Good for listing services or features at a glance.

FreeDark mode ready

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

Free with a free account.

Preview

Preview of the icon template: an icon card grid for Bricks Builder: six cards with an icon in a soft square, a title and a short line of text

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 Card grid

    A grid that takes FBK Card or FBK Icon item instances, or a query loop.

  • FBK Icon item

    Icon, title and text, stacked, inline or boxed.

  • 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 Icon cards, class fbk-cardsicon

One hover duration for the whole library (--fbk-hover)

--fbk-t-time
var(--fbk-hover)

Replaces

In Fancy Bricks 1.0 and 2.0 this was Cards (2.0), Card 01 (2.0) and Content (1.0).