Block · C-048 · storefront

CampaignBanner

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

Install

Blocks compose Koten primitives; install koten-theme first.

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

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/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

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.

Read the whole page