CTA Banner
Full-width call-to-action banner with gradient background, eyebrow text, headline, body copy, and action buttons. For landing page CTAs, marketing sections, and page closers.
<arc-cta-banner>Overview
CtaBanner is a full-width promotional block for page closers, hero-adjacent CTAs, and marketing sections. It combines an eyebrow label, a gradient-text headline, body copy, and an actions slot in a centered, vertically stacked layout with a subtle radial gradient background.
The gradient background uses the same accent tokens as the rest of ARC UI, so it follows custom themes. Set the nogradient attribute to disable the background effect for quieter contexts. Both the eyebrow and headline accept slot overrides for rich content beyond simple strings.
On viewports below 768px, padding compresses and action buttons stack vertically. CSS parts are exposed on every semantic region so you can override styles without breaking encapsulation.
Guidelines
When to use
- Use at the bottom of landing pages as a page-closing CTA
- Keep the headline short and action-oriented: 6 words or fewer
- Provide at most two action buttons: one primary, one secondary
- Use the eyebrow to set context before the headline
When not to use
- Do not stack multiple CTA banners on the same page; one is enough
- Do not use for informational content. Use an Alert or Card instead
- Do not omit both headline and eyebrow; the banner needs at least a headline
- Do not add more than two action buttons; too many choices reduce conversion
Features
- Radial gradient background using accent-primary and accent-secondary tokens
- Gradient-text headline with responsive clamped font size (28–40px)
- Eyebrow label with accent gradient text treatment
- Actions slot for buttons with responsive stacking below 768px
- nogradient attribute to disable the background effect
- Slot overrides for eyebrow and headline for rich custom content
- CSS parts on every region: container, background, inner, eyebrow, headline, body, actions
- Follows custom themes through the design token system
Preview
Usage
CTA Banner is in the marketing domain group, so it is absent from the default @arclux/arc-ui barrel. Import it from@arclux/arc-ui/marketing, or from its own subpath@arclux/arc-ui/cta-banner. Everything else (the element, the CSS, the framework wrappers, the support it gets) is unchanged.
<script type="module" src="@arclux/arc-ui"></script>
<arc-cta-banner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<arc-button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</arc-button>
<arc-button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</arc-button>
</arc-cta-banner>import { Button, CtaBanner } from '@arclux/arc-ui-react';
export function PageCTA() {
return (
<CtaBanner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<Button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</Button>
<Button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</Button>
</CtaBanner>
);
}<script setup>
import { Button, CtaBanner } from '@arclux/arc-ui-vue';
</script>
<template>
<CtaBanner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<Button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</Button>
<Button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</Button>
</CtaBanner>
</template><script>
import { Button, CtaBanner } from '@arclux/arc-ui-svelte';
</script>
<CtaBanner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<Button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</Button>
<Button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</Button>
</CtaBanner>import { Component } from '@angular/core';
import { Button, CtaBanner } from '@arclux/arc-ui-angular';
@Component({
imports: [Button, CtaBanner],
template: `
<arc-cta-banner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<arc-button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</arc-button>
<arc-button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</arc-button>
</arc-cta-banner>
`,
})
export class PageCTAComponent {}import { Button, CtaBanner } from '@arclux/arc-ui-solid';
export function PageCTA() {
return (
<CtaBanner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<Button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</Button>
<Button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</Button>
</CtaBanner>
);
}import { Button, CtaBanner } from '@arclux/arc-ui-preact';
export function PageCTA() {
return (
<CtaBanner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<Button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</Button>
<Button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</Button>
</CtaBanner>
);
}<arc-cta-banner eyebrow="Ready when you are" headline="Build something that glows.">
<p>One package for plain HTML, a native one for each of seven frameworks. MIT licensed.</p>
<arc-button slot="actions" href="/docs/getting-started" variant="primary" size="md">Get Started</arc-button>
<arc-button slot="actions" href="/docs/components" variant="secondary" size="md">Explore Components</arc-button>
</arc-cta-banner><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-cta-banner — self-contained, no external CSS needed -->
<style>
@media (max-width: 768px) {
.arc-cta-banner .cta { padding: 40px var(--space-md); }
}
@media (max-width: 768px) {
.arc-cta-banner .cta__actions { flex-direction: column; align-items: center; }
}
</style>
<div class="arc-cta-banner" style="display: block; position: relative; overflow: hidden">
<div class="cta" style="position: relative; padding: 96px 24px">
<div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(77, 126, 247, 0.1), transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(139, 92, 246, 0.08), transparent 60%); pointer-events: none"></div>
<div style="position: relative; max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px">
Eyebrow
Headline
<div style="color: rgb(160, 165, 195); font-size: 15px; max-width: 480px; text-wrap: balance; line-height: 1.7">
Cta Banner
</div>
<div class="cta__actions" style="display: flex; gap: var(--space-md); margin-top: 8px">
</div>
</div>
</div>
</div>API
eyebrowstring''- Small label text displayed above the headline. Typically a short phrase like "Ready to build?" that sets context.
headlinestring''- Main headline text rendered with gradient display styling. Keep it concise and action-oriented.
nogradientbooleanfalse- When true, disables the radial gradient background effect for quieter contexts.
See Also
- AlertContextual alert banner with five semantic variants and an optional dismiss button.
- Feature CardCard with icon, heading, description, and animated hover effects.
- ButtonPrimary call-to-action element with three visual variants that map to action hierarchy. Supports prefix and suffix slots for icons. Renders as an anchor when given an href, for navigation actions on landing pages, toolbars, and forms.