Skip to content

Heroes & Sections

CTA — Full-Bleed Gradient Banner

Full-bleed brand-gradient CTA banner, the project's single-use-per-page gradient moment.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add cta-banner-gradient
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

CTA — Full-Bleed Gradient Banner

CTA — Full-Bleed Gradient Banner

Live preview of the CTA — Full-Bleed Gradient Banner component

Stop re-building the same sections every client

Velocity X gives your team a locked design system and a component catalog to compose from.

Start your fork Talk to sales

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the CTA — Full-Bleed Gradient Banner component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Heroes & Sections components

Browse all →

Hero — Centred

Centred eyebrow/headline/sub hero with two optional CTAs.

Hero — Split with Image

Copy-left image-right hero with a gradient placeholder fallback when no image is supplied.

Hero — Background Image + Scrim

Full-bleed background image hero with a solid WCAG-AA scrim behind the copy.

Hero — Gradient Mesh Background

Centred hero with a pure-CSS radial gradient mesh backdrop, no shader runtime.

Hero — Email Capture

Centred hero with an inline plain-HTML email capture form wired to any form action.

Hero — Video Background

Full-bleed autoplaying muted video hero with a solid scrim and reduced-motion fallback to the poster frame.