Opens in a new tab

Cards · Lighted

A cards section for Bricks Builder with six photo cards on a dark background. Each card's border lights up around the mouse as it moves over it, for a subtle glow effect. Built on the FBK Card and FBK Card grid components.

Needs Code execution

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

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

Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution

Preview

Preview of the lighted template: a cards section for Bricks Builder with six photo cards on a dark background

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

    A media slot, title, text, a content slot and an actions slot.

  • FBK Card grid

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

  • 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 Lighted cards, class fbk-cardslight

Light around the mouse: color and size

--fbk-t-light
var(--fbk-highlight-accent, var(--fbk-accent))
--fbk-t-light-size
20em

Replaces

In Fancy Bricks 1.0 and 2.0 this was Lighted cards (2.0).