Hero · Photo
A hero for Bricks Builder with a cutout photo of a person over a glass-edged disc, beside a title with a highlighted word and two buttons. Behind them, a diagonal brand colored gradient slides and three soft blurred lights of different tones drift and cross the panel, with a pause button for the motion.
Free with a free account.
Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution
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 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 Hero, class fbk-herophoto
Height, the background (diagonal brand gradient) and the colors of the moving lights
- --fbk-t-height
- max(36em, 80svh)
- --fbk-t-light-1
- color-mix(in srgb, var(--primary) 80%, var(--white))
- --fbk-t-light-2
- var(--primary)
- --fbk-t-light-3
- color-mix(in srgb, var(--primary) 60%, var(--base-ultra-dark))
Height of the cut-out subject, kept shorter than the panel so it has room around it
- --fbk-t-subject-h
- 26em
Replaces
In Fancy Bricks 1.0 and 2.0 this was 01 Hero (1.0) and Hero (1.0).
