CTA KIT · 6 LAYOUTS × 5 COLORS

One component, thirty combinations

Every CTA on the site renders from CTA Kit.dc.html. Set layout and color as props; the rendered element carries data-cta-layout and data-cta-color so Qualified can target any variant without new markup.

THE ONE BRAND RULE THIS KIT KEEPS

Hyper red is the only color used on a page that has other actions. Midnight and Dusk are for dark bands. Yellow and Sky are reserved for Qualified overlays and campaign pages, where the CTA is the only action present.

L1

Inline band

END OF ANY PAGE · HYPER

FULL-WIDTH FIELD, HEADLINE LEFT, ONE ACTION RIGHT. THE DEFAULT PAGE-CLOSING CTA.

L2

Split card

MID-PAGE, TWO ACTIONS · MIDNIGHT

BORDERED CARD. PRIMARY PLUS GHOST, SO A SECOND ACTION IS AVAILABLE WITHOUT COMPETING.

L3

Stat-backed

PLATFORM, WHY REDIS · DUSK

THREE PROOF FIGURES ABOVE THE ASK, SO THE CTA ARRIVES AFTER THE EVIDENCE.

L4

Compact overlay

QUALIFIED OVERLAY · YELLOW

420PX CARD FOR A CHAT-TRIGGERED POPOVER. DISMISSIBLE, ONE ACTION, NO COMPETING LINKS.

L5

Sticky footer bar

QUALIFIED ACTIVATION · SKY

SLIM BAR PINNED TO THE VIEWPORT BOTTOM. EYEBROW, ONE LINE, ONE ACTION, DISMISS.

L6

Form-first

FOOTER, BLOG, OFFERS · MIDNIGHT

EMAIL FIELD PLUS BUTTON INLINE, FOR NEWSLETTER AND GATED-ASSET ASKS.

The five colors

Any layout takes any color. These are live tokens, not swatch images.

Get Started

{{ k.name }}

{{ k.token }}

{{ k.use }}

Qualified hooks

Every rendered CTA exposes these. Nothing else is needed to activate a variant.

{{ h.attr }} {{ h.val }} {{ h.note }}