Opens in a new tab
Log inStart free

CTA · Floating card

A CTA section for Bricks Builder with a full-width photo and a white card floating over one side, hanging a little below its edge. The card holds a title, a short text, two buttons and three trip facts. Good for a travel or booking call to action with a strong photo.

Dark mode ready

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

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

Preview

Preview of the floating card template: a CTA section for Bricks Builder with a full-width photo and a white card floating over one side, hanging a little below its edge

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 CTA stage, class fbk-ctafloat

How much photo shows above the card

--fbk-t-top
clamp(10em, 22vw, 18em)

How far the card hangs below the photo

--fbk-t-hang
var(--space-xl)

Photo zoom on hover: a photo's pace, 1.5 x the library's hover time

--fbk-t-zoom-time
calc(var(--fbk-hover) * 1.5)

More like this

See all CTA templates