Banner Header
Banner Header
Banner Header is a gradient banner component for displaying titles, subtitles, and actions with variant-based theming and semantic heading levels.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Min-height | 120-160px |
| Padding | 24-32px |
| Border Radius | 8-12px |
| Title Size | 24-32px |
| Subtitle Size | 14-18px |
Variant Styles
Section titled “Variant Styles”Product gradient with blue tones
Reward gradient with warm tones
Custom gradient and text color
Configuration Options
Section titled “Configuration Options”| title | string | '' | Main heading text |
| subtitle | string | undefined | Optional subtitle |
| variant | 'product' \| 'reward' \| 'custom' | 'product' | Gradient style |
| headingLevel | 1-6 | 1 | Semantic heading level |
| align | 'left' \| 'center' | 'left' | Text alignment |
| showBackButton | boolean | false | Show back navigation |
| backIconSrc | string | default icon | Custom back icon path |
| backgroundGradient | string | undefined | Custom gradient (variant=custom) |
| textColor | string | '#fff' | Custom text color (variant=custom) |
Content Projection
Section titled “Content Projection”| Slot | Description |
|---|---|
#title | Custom title template (replaces config.title) |
#actions | Right-aligned action buttons |
Heading Levels
Section titled “Heading Levels”| Level | HTML Tag | Usage |
|---|---|---|
| 1 | <h1> | Main page title |
| 2 | <h2> | Section title |
| 3-6 | <h3>-<h6> | Subsection titles |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Page headers with visual emphasis
- Product/package banners
- Promotional content headers
- Form section headers
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use appropriate heading levels | Skip SEO hierarchy |
| Keep titles concise | Long heading text |
| Use semantic variants | Random color choices |
| Consider content projection | Over-configure via props |