Header

Header Component

Responsive header component with navigation and customizable title/subtitle.

Basic Header

Header without Navigation

Header with Long Title

Dark Theme Header

Usage

The Header component provides a responsive header with customizable title, subtitle, and navigation.

Basic Example

---
import { Header } from '@karan-monorepo/design-system/components/Header.ts';
---

<kds-header title="My Blog" subtitle="Welcome to my blog"></kds-header>

<!-- Dark theme example -->
<kds-header
  title="My Blog"
  subtitle="Welcome to my blog"
  theme="dark"
></kds-header>

Properties

Property	Type	Default	Description
title	string	'Tech Blog'	The main title displayed in the header
subtitle	string	''	Optional subtitle text
showNavigation	boolean	true	Whether to show the navigation menu
theme	'light' | 'dark'	'light'	Theme variant using design system tokens

Styling

The header component uses CSS custom properties and can be customized with CSS:

kds-header {
  --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --header-text-color: white;
  --header-padding: 2rem 1rem;
}

Responsive Design

The header automatically adapts to different screen sizes:

• On mobile devices, the layout switches to a vertical stack
• Navigation links wrap appropriately
• Font sizes adjust for better readability

Accessibility

• Semantic HTML structure with proper heading hierarchy
• Keyboard navigation support
• High contrast colors for better readability
• Screen reader friendly markup