Docs Kickstarter

Header Section

A flexible header section component that creates engaging page introductions with customizable taglines, headlines, and descriptions. Perfect for landing pages, feature sections, and content introductions.

Usage

---
import HeaderSection from "@/components/block/HeaderSection.astro";
---

<HeaderSection 
  tagline="Getting Started"
  headline="Welcome to our platform"
  description="Everything you need to build amazing products."
/>

Examples

Default Header

Header section

Short engaging headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales. 

<HeaderSection 
  tagline="Header section"
  headline="Short engaging headline"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales."
/>

Features Header

Features

Everything you need to build amazing docs

Our comprehensive documentation platform provides all the tools and components you need to create professional, user-friendly documentation sites. 

<HeaderSection 
  tagline="Features"
  headline="Everything you need to build amazing docs"
  description="Our comprehensive documentation platform provides all the tools and components you need to create professional, user-friendly documentation sites."
/>

Dark Variant

About us

Building the future of documentation

We're passionate about creating tools that help teams communicate better through beautiful, accessible documentation. 

<HeaderSection 
  tagline="About us"
  headline="Building the future of documentation"
  description="We're passionate about creating tools that help teams communicate better through beautiful, accessible documentation."
  variant="dark"
/>

Different Sizes

Small Size

Small Header

Compact and focused

Perfect for secondary sections and smaller content areas.

Extra Large Size

🎉 New Release

Introducing Advanced Components

Take your documentation to the next level with our new suite of interactive components and layouts. 

<!-- Small size -->
<HeaderSection 
  headline="Compact and focused"
  size="sm"
/>

<!-- Extra large size -->
<HeaderSection 
  headline="Make a big statement"
  size="xl"
/>

Text Alignment

Left Aligned

Left aligned

Content flows naturally

Great for article introductions and content that needs to feel more conversational.

Right Aligned

Right aligned

Stand out from the crowd

Perfect for creating visual interest and breaking up traditional layouts. 

<!-- Left aligned -->
<HeaderSection 
  headline="Content flows naturally"
  align="left"
/>

<!-- Right aligned -->
<HeaderSection 
  headline="Stand out from the crowd"
  align="right"
/>

Minimal Header (No Tagline or Description)

Clean and minimal 

<HeaderSection 
  headline="Clean and minimal"
  showTagline={false}
  showDescription={false}
/>

Props

PropTypeDefaultDescription
taglinestring"Header section"Optional tagline text displayed above the headline
headlinestring"Short engaging headline"Main headline text (required)
descriptionstring"Lorem ipsum..."Supporting description text
variant'default' | 'dark''default'Visual variant for different backgrounds
size'sm' | 'md' | 'lg' | 'xl''lg'Size of the headline text
align'left' | 'center' | 'right''center'Text alignment
showTaglinebooleantrueWhether to display the tagline
showDescriptionbooleantrueWhether to display the description
classNamestring''Additional CSS classes

Variants

Default

The default variant uses standard background and text colors that work well with your site’s theme.

Dark

The dark variant provides a dark background with light text, perfect for creating contrast and visual interest.

Size Options

  • Small (sm): text-2xl md:text-3xl - Compact headers for secondary content
  • Medium (md): text-3xl md:text-4xl - Balanced size for most use cases
  • Large (lg): text-4xl md:text-5xl - Default size, great for main sections
  • Extra Large (xl): text-5xl md:text-6xl - Maximum impact for hero sections

Responsive Behavior

The HeaderSection component is fully responsive:

  • Mobile: Smaller text sizes and reduced spacing
  • Desktop: Larger text sizes and increased spacing
  • Container: Max width of 4xl (896px) with automatic centering
  • Content: Max width of 2xl (672px) for optimal reading length

Accessibility

  • Uses semantic HTML with proper heading hierarchy
  • Maintains good color contrast ratios
  • Responsive text sizing for better readability
  • Proper spacing for touch targets on mobile

Best Practices

  1. Keep headlines concise - Aim for 2-8 words that clearly communicate value
  2. Use descriptive taglines - Help users understand the context quickly
  3. Limit description length - 1-2 sentences work best for scanning
  4. Choose appropriate sizes - Use xl for heroes, lg for main sections, sm for secondary content
  5. Consider contrast - Use the dark variant strategically to create visual hierarchy
  6. Test alignment - Center alignment works for most cases, but left/right can add visual interest

Integration with Other Components

The HeaderSection works well with:

  • FeatureSection - Use as an introduction to feature grids
  • CTASection - Combine for compelling conversion flows
  • BlogSection - Perfect for blog category or archive introductions
  • Footer - Can be used for footer section headings

Customization

You can extend the component by:

  1. Adding custom CSS classes via the className prop
  2. Modifying variant styles in the component definition
  3. Creating new size options by extending the sizeClasses object
  4. Adding animation with CSS transitions or JavaScript libraries