Section Header

A reusable component for creating consistent section headers throughout your application. Includes support for badges, headings, subtext, and content.

Section Header component

Usage

import { SectionHeader } from "@/components/ui/custom/section-headers";
 
export default function ExampleSection() {
  return (
    <SectionHeader>
      <SectionHeader.HeaderContent>
        <SectionHeader.Badge>FEATURES</SectionHeader.Badge>
        <SectionHeader.Heading>Powerful Features</SectionHeader.Heading>
        <SectionHeader.Text>
          Everything you need to build modern web applications
        </SectionHeader.Text>
      </SectionHeader.HeaderContent>
 
      <SectionHeader.Content>
        {/* Your section content goes here */}
      </SectionHeader.Content>
    </SectionHeader>
  );
}

Customization

While it may seem like a small component, the Section Header is very useful. Making slight design changes here can dramatically transform the look of your entire landing page.

Tips

Use consistent section headers across your application for better UX
Keep heading text concise and descriptive
Use badges to categorize or highlight section types
The component is designed to work with or without all elements

Usage

Tips

On this page