---
title: "CampaignBanner"
description: "A campaign notice with eyebrow, title, description, deadline and call to action. Three layouts and three semantic tones."
kind: block
id: C-048
category: storefront
registry: "campaign-banner"
docs: "https://koten.codehive.com.co/blocks/storefront/campaign-banner"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/campaign-banner.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/campaign-banner.json"
language: en
---

# CampaignBanner · キャンペーン

> Block C-048 in the Koten UI catalog.

A campaign notice with eyebrow, title, description, deadline and call to action. Three layouts and three semantic tones.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/campaign-banner.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/campaign-banner.json
```

## Files

- `@/components/patterns/campaign-banner.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Campaign card

The card layout fits a column; the side border and eyebrow use the sale tone.

```tsx
<CampaignBanner
  eyebrow="Autumn fair"
  title="K-1 lens kit: ¥12,000 off"
  description="Until October 31. Double points on every lens."
  deadline="Until October 31"
  cta={{ label: "View the campaign", href: "/campaigns/autumn" }}
/>
```

### Informational hero

layout="hero" with tone="info" for service announcements; the CTA is still a real link.

```tsx
<CampaignBanner
  layout="hero"
  tone="info"
  eyebrow="Store services"
  title="Free sensor cleaning in October"
  description="Book a slot at any HIKARI counter. One cleaning per camera."
  deadline="Book until October 30"
  cta={{ label: "Book a slot", href: "/services/cleaning" }}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | `ReactNode` | `—` | Serif heading; it is the section heading. |
| `eyebrow` | `ReactNode` | `—` | Short eyebrow that classifies the campaign. |
| `description` | `ReactNode` | `—` | Brief terms; long details belong on the campaign page. |
| `deadline` | `ReactNode` | `—` | Deadline in tabular text, independent of the document language. |
| `cta` | `{ label: string; href: string }` | `—` | Label and destination of a real link, not an actionless button. |
| `tone` | `sale \| info \| neutral` | `sale` | Changes the border and eyebrow; body text keeps its contrast. |
| `layout` | `strip \| card \| hero` | `card` | Adjusts padding and heading scale to the available space. |

## Accessibility

- The banner is a <section> with its own heading, so it appears in the page outline.
- The deadline and terms are text; the border colour only reinforces them.
- The CTA is a link with a visible name and the system focus ring.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/campaign-banner
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/campaign-banner.md
- Repository: https://github.com/codehive-colombia/koten