Cards · Links
A grid of tall link cards for Bricks Builder: on hover, the card's surface shrinks into its arrow and uncovers a darkened photo underneath. Built on the FBK Card grid, it gives plain links a bit of depth without extra markup.
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 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 Link cards, class fbk-cardsarea
Card height and the shade over the photo
- --fbk-t-height
- 22em
- --fbk-t-shade
- color-mix(in srgb, var(--base-ultra-dark) 65%, transparent)
One hover duration for the whole library (--fbk-hover); the delays below are fractions of it
- --fbk-t-time
- var(--fbk-hover)
Replaces
In Fancy Bricks 1.0 and 2.0 this was Card Áreas (2.0).
