Italic accent text for slide headers — use for event names, series labels, or other branding above the title.
Props
The header badge content (typically event name or series label)
Additional CSS classes to apply
Usage
import { Slide, SlideHeaderBadge, SlideTitle } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide>
<SlideHeaderBadge>React Summit 2026</SlideHeaderBadge>
<SlideTitle>Building Modern UIs</SlideTitle>
</Slide>
);
}
Event Branding
<Slide align="center">
<SlideHeaderBadge>Tech Talk Series</SlideHeaderBadge>
<SlideTitle>Episode 5: State Management</SlideTitle>
<SlideSubtitle>Patterns and anti-patterns</SlideSubtitle>
</Slide>
Company or Series Label
<Slide align="left">
<SlideHeaderBadge>Acme Corp Presents</SlideHeaderBadge>
<SlideTitle>2026 Product Roadmap</SlideTitle>
</Slide>
Custom Styling
<SlideHeaderBadge className="text-blue-500">
Special Edition
</SlideHeaderBadge>
Styling Details
- Font size:
text-xl (mobile) to text-2xl (small screens and up)
- Font weight:
font-semibold
- Font style:
italic
- Letter spacing:
tracking-tight
- Color:
text-foreground
- Layout: Wrapped in a flex container with
items-center gap-3
- Semantic HTML: Renders as
<span> inside a <div> wrapper