API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/Header

Header

Flexible page header component with gradient text effects and customizable layout

🔧 Props

Property	Type	Default	Description
spanOne	string	'Welcome, '	First part of header text
spanTwo	string	'neighbor'	Second part of header text (styled with gradient)
tagLine	Element\|string	multi-part span with styled action words	Tagline below main header
containerClass	string	''	Classes for outer container
class	string	''	Classes for header wrapper
headerSpanClass	string	''	Classes for entire header span
spanOneClass	string	''	Classes for first text span
spanTwoClass	string	''	Classes for second text span (gradient)
tagLineClass	string	''	Classes for tagline element

✨ Features

Two-part title structure for flexible text styling

Gradient text effect on second span

Customizable tagline with styled action words

FilterClassName pattern for intelligent class merging

Full Tailwind override capability

Responsive typography scaling

💻 Examples

Default Header

javascript•Default Header

return Header();  // Shows "Welcome, neighbor" with gradient on "neighbor"

▶️ Live Preview

Welcome, neighbor

Enter or join your community in seconds

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Custom Header Text

javascript•Custom Header Text

return Header({
  spanOne: 'Hello, ',
  spanTwo: 'friend',
  tagLine: 'Join our community today'
});

▶️ Live Preview

Hello, friend

Join our community today

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Custom Styling

javascript•Custom Styling

return Header({
  spanOne: 'Discover ',
  spanTwo: 'services',
  spanTwoClass: 'text-transparent bg-clip-text bg-gradient-to-r from-sunrise to-sunset',
  tagLineClass: 'text-lg text-smoke'
});

▶️ Live Preview

Discover services

Enter or join your community in seconds

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do