Section Banner

Propaganda-style skewed section headers with star icons.

Important Directive

The red banner is the default variant, perfect for important announcements and calls to action.

Operations Status

The black banner provides a more industrial, serious tone for operational content.

Achievement Unlocked

Gold banners celebrate achievements and positive outcomes.

Breaking News

Use breakOut to extend the banner beyond its container for extra emphasis.

Simple Section Header

SectionHeader is a simpler alternative without the full skew effect.

Installation

pnpm dlx shadcn@latest add https://propcore.dev/r/section-banner.json

Usage

import { SectionBanner, SectionHeader } from "@/components/ui/section-banner"

<SectionBanner>Important Directive</SectionBanner>
<SectionBanner variant="black">Operations Status</SectionBanner>
<SectionHeader>Simple Section Header</SectionHeader>

Components

SectionBanner

Full propaganda-style banner with skew effect and extending line.

Prop	Type	Default	Description
`variant`	`"red" \| "black" \| "gold"`	`"red"`	Color variant
`breakOut`	`boolean`	`false`	Extend beyond container bounds
`className`	`string`	-	Additional CSS classes

SectionHeader

Simpler alternative without the skew - just star decoration and lines.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Features

Skewed container with counter-skewed text for visual tension
Star icons for propaganda flair
Extending line that fills remaining space
Three variants: Red (default), black (industrial), gold (achievement)
breakOut option to extend beyond container