CTA Banner — ARC UI

Components

CTA Banner

content

static

<arc-cta-banner>

Overview

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

Stack multiple CTA banners on the same page — one is enough
Use for informational content — use Callout or Card instead
Omit both headline and eyebrow — the banner needs at least a headline
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: `
    <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>
  `,
})
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

Prop	Type	Default	Description
`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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight