# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/cta11. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-02-17

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [CTA](/blocks/cta)
5. /
6. Banner CTA

# Banner CTAFREE

Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/cta11`

## Cta11: Banner CTA

Horizontal banner CTA meant to sit inline between content blocks: a bordered, muted card holding a badge, heading, and description on one side and a cluster of buttons on the other, stacking vertically on mobile.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/cta11"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/cta11"
```

This installs the block to `components/beste/block/cta11.tsx` and the `Badge` and `Button` shadcn/ui primitives it uses.

### Quick start

The installed file exports `cta11Demo` alongside the block: the exact props behind the preview above. Spread it to get a working banner in one line.

tsxCopy

```
import { Cta11, cta11Demo } from "@/components/beste/block/cta11";

export default function Page() {
  return <Cta11 {...cta11Demo} />;
}
```

Then replace the demo with your own props. Written out, the same setup looks like this:

tsxCopy

```
import { ArrowRight } from "lucide-react";
import { Cta11 } from "@/components/beste/block/cta11";

export default function Page() {
  return (
    <Cta11
      badge={{ label: "New" }}
      heading="Ship your first workflow today"
      description="Set up automation in minutes, no code required."
      buttons={[
        { label: "Get Started", href: "/signup", icon: <ArrowRight className="size-4" /> },
        { label: "Talk to Sales", href: "/contact", variant: "outline" },
      ]}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                                                    |                                       |
| ----------- | --------------------------------------------------- | ----------- | -------------------------------------------------------------- | ------------------------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                                              | Optional pill badge above the heading |
| heading     | string                                              | –           | Headline HTML; wrap a phrase in <strong> to color-highlight it |                                       |
| description | string                                              | –           | Supporting text under the heading                              |                                       |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTA buttons rendered on the trailing side of the banner        |                                       |
| className   | string                                              | –           | Extra classes for the outer <section>                          |                                       |

tsCopy

```
type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
  icon?: React.ReactNode;
};
```

### Behavior notes

* The whole block is a single bordered card (`rounded-md border bg-muted p-6 md:p-10`), not a bare full-bleed section; content and buttons sit in a `flex-col` on mobile and switch to a `flex-row` with `items-center` from `md` up.
* `ButtonItem.icon` renders _after_ the label inside the link (`{button.label}{button.icon}`), the opposite order from CTA blocks that lead with the icon.
* The badge defaults to `variant="default"` when omitted from the item (not `"secondary"`, unlike `cta8`), and sits with `mb-3` above the heading.
* There's no footnote or secondary text row; this is a compact two-part layout, content block plus button cluster, with no third element.
* Buttons don't stretch to fill the row: the button cluster is `shrink-0`, so it keeps its intrinsic width even as the content column grows.

## More CTA blocks

[View all CTA](/blocks/cta)

[](/block/cta18)

PRO

cta18

### Fullwidth Image CTA

Full-width call-to-action with background image overlay, heading, and action buttons. Perfect for bold, visually striking conversion sections.

[](/block/cta9)

PRO

cta9

### Split Layout Newsletter CTA

Two-column call-to-action with decorative image on one side and feature list with action buttons on the other. Perfect for visually rich conversion sections.

[](/block/cta34)

PRO

cta34

### Bordered Stack CTA

Vertically stacked bordered sections with alternating content and a final call-to-action. Perfect for storytelling-driven conversion.

[](/block/cta24)

PRO

cta24

### Split Text CTA

Asymmetric two-column layout with large heading on the left and description with buttons on the right. Perfect for editorial-style conversion sections.

[](/block/cta35)

PRO

cta35

### Avatar Wall CTA

Dense grid of subscriber avatars with centered heading overlay and call-to-action. Perfect for community-driven conversion.

[](/block/cta36)

PRO

cta36

### Accent Sidebar CTA

Card with colored accent left border and inline call-to-action. Perfect for attention-grabbing inline conversion prompts.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.