Opens in a new tab

FBK Hero

A full-bleed hero stage: photos, a video or nothing, with content in the page width.

  • Used in 15 templates
  • 7 options
  • Includes FBK Photo columns
  • Native Bricks element

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

One FBK Hero, as in the first example below. Change anything from the panel after you paste it.

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

Every FBK Hero variation

Live from the demo site. Switch the width and the background, or open it full screen.

Preview of the hero backgrounds template: a showcase of the FBK Hero component for Bricks Builder

The options

Every property of the component, in the order the Bricks panel shows them. FBK Photo columns has its own, in each piece you drop in.

The options of FBK Hero
OptionChoicesDefault
LayerOver the background, under the text. Side: dark where the text is. Brand gradient: an opaque brand background (no photo needed).None, Dark, Dark from the start side, Dark from the end side, Dark from below, Brand tint, Brand gradientDark
EffectSlideshows take turns between the 2 to 5 items in the Background slot; Columns: put 2 or 3 blocks in the slot, each with 2 to 5 photos. Effects that keep moving show the pause button. Choose None for a still background. «Reduce motion» stills them all.None, Slow zoom, Slideshow: fade, Slideshow: slide up, Slideshow: slide left, Slideshow: columns, Lights, Moving gradient, Strips (on load, once), Slow panNone
Time per photoSlideshows and FBK Photo columns: how long each photo shows (the pause button's ring turns once per photo).4 s, 6 s, 8 s6 s
HeightTall: three quarters of the screen (at least 34em). Auto: the content and its padding.Auto, Tall, Full screenTall
Content positionMiddle, BottomMiddle
WidthFull bleed: the background reaches the screen edges. Boxed: a rounded box as wide as the content.Full bleed, BoxedFull bleed
Text colorsDark: white text for a photo or dark background. Light: for a light background without a layer.Light, Dark, BrandDark

Used in 15 templates

A few of them. Change FBK Hero once on your site and every one of these sections follows.

See all 15 in the library

Questions, answered

Short answers about FBK Hero.

No. Copy it from this page and paste it anywhere in Bricks. It also comes with every template that uses it.

Every instance follows: the design lives in the component and its classes, not in each copy.

Yes. Copy it for Fancy Framework, Automatic.css or Core Framework, and it uses your colors and sizes.

Every component comes inside a template

Browse the library, copy a section, and the components it uses come with it.