Section Header

Component

About

Section header with eyebrow chip (red text on rose-50 bg), bold title with optional highlighted phrase in brand red, and a subtitle paragraph. Supports 'left' or 'center' alignment.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Section Header to your project and fits it to your theme.

Code

How Section Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import SectionHeader from '@/components/ui/sectionheader'

export default function Demo() {
  return (
    <div className="space-y-12 p-8 bg-slate-50">
      <SectionHeader
        eyebrow="Over ons"
        title="3 Generaties Vakmanschap"
        highlighted="Vakmanschap"
        subtitle="Sinds 1999 voert J.J.P. Smans Onderhoud en Service in Breda vakwerk uit — van schilderwerk en kozijnen tot complete renovaties."
      />
      <SectionHeader
        eyebrow="Diensten"
        title="Wat wij voor u kunnen betekenen"
        align="left"
        subtitle="Van een nieuwe lik verf tot een complete woningrenovatie — wij hebben het vakmanschap in huis."
      />
    </div>
  )
}