Opens in a new tab

Hero · Image text

A hero section for Bricks Builder built around a huge word filled with a photo: the letters grow until they fill the screen, cutting the photo open, then the photo darkens and the intro (headline, lead text and button) rises over it. A striking opening moment for a landing page.

Dark mode readyNeeds 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 image text template: a hero section for Bricks Builder built around a huge word filled with a photo

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 Hero

    A full-bleed hero stage: photos, a video or nothing, with content in the page 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 · Word (decorative, filled with the photo), class fbk-heroword

Size of the word

--fbk-t-size
clamp(5em, 19vw, 17em)

Replaces

In Fancy Bricks 1.0 and 2.0 this was Hero background text (2.0).