CTA Banner

Full-width call-to-action banner with gradient background, eyebrow text, headline, body copy, and action buttons. Ideal for landing page CTAs, marketing sections, and page closers.

Components

CTA Banner

content

static

<arc-cta-banner>

Overview

CtaBanner is a full-width promotional block designed for conversion-critical moments — page closers, hero-adjacent CTAs, and marketing sections. It combines an eyebrow label, a gradient-text headline, body copy, and an actions slot into 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 adapts automatically to 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. The component is fully responsive: on viewports below 768px, padding compresses and action buttons stack vertically. CSS parts are exposed on every semantic region so consumers 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 Callout 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 reduces 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
Automatic theme adaptation via design token system

Preview

Install in seconds. Build in minutes. Ship production-ready interfaces that look incredible out of the box.

Get Started

Explore Components

Usage

<script type="module" src="@arclux/arc-ui"></script>

<arc-cta-banner eyebrow="Ready to build?" headline="Start shipping with ARC UI.">
  <p>Install in seconds. Build in minutes. Ship production-ready interfaces that look incredible out of the box.</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 to build?" headline="Start shipping with ARC UI.">
      <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
    <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
  <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
      <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
      <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
      <p>Install in seconds. Build in minutes. Ship production-ready interfaces.</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 to build?" headline="Start shipping with ARC UI.">
  <p>Install in seconds. Build in minutes. Ship production-ready interfaces that look incredible out of the box.</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

eyebrow string ='': Small label text displayed above the headline. Typically a short phrase like "Ready to build?" that sets context.
headline string ='': Main headline text rendered with gradient display styling. Keep it concise and action-oriented.
nogradient boolean =false: When true, disables the radial gradient background effect for quieter contexts.

CTA Banner

Overview

Guidelines

When to use

When not to use

Features

Preview

Start shipping with ARC UI.

Usage

API

See Also

Docs

Project

Arclight