Opens in a new tab

Hero · App

A hero section for Bricks Builder with a centered intro (H1, lead and two buttons), a strip of tags scrolling edge to edge, and a framed screenshot of the product sitting on the change from gray to white, with its own caption. Good for a SaaS or app landing page that wants to show the product right away.

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 app template: a hero section for Bricks Builder with a centered intro (H1

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 Image

    A photo with proportion, shape, decoration, border and an optional caption.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

  • FBK Marquee

    A strip that scrolls without end: logos, blocks, text or a query loop.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Screenshot block, class fbk-heroapp

Width of the screenshot, color of the lower half of the section

--fbk-t-width
52em
--fbk-t-below
var(--white)

Replaces

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