Heading
Heading component for semantic HTML headings with consistent styling and sizing
Basic Usage
The most basic heading with h2 level and sm size by default:
Default Heading
<neura::heading>Default Heading</neura::heading>Heading Levels
Use different heading levels to structure your content:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<neura::heading level="h1">Heading 1</neura::heading>
<neura::heading level="h2">Heading 2</neura::heading>
<neura::heading level="h3">Heading 3</neura::heading>
<neura::heading level="h4">Heading 4</neura::heading>
<neura::heading level="h5">Heading 5</neura::heading>
<neura::heading level="h6">Heading 6</neura::heading>Sizes
Customize the text size independently of the heading level:
Extra Small (text-sm)
Small (text-base) - Default
Medium (text-lg)
Large (text-xl)
Extra Large (text-2xl)
<neura::heading level="h1" size="xs">Extra Small</neura::heading>
<neura::heading level="h2" size="sm">Small (Default)</neura::heading>
<neura::heading level="h3" size="md">Medium</neura::heading>
<neura::heading level="h4" size="lg">Large</neura::heading>
<neura::heading level="h5" size="xl">Extra Large</neura::heading>Text Alignment
Align the heading text using the align attribute:
Left Aligned
Center Aligned
Right Aligned
<neura::heading align="left">Left Aligned</neura::heading>
<neura::heading align="center">Center Aligned</neura::heading>
<neura::heading align="right">Right Aligned</neura::heading>Combining Level and Size
Combine different levels and sizes to create a visual hierarchy:
Page Title
This is a large page title
Section Title
This is a section heading
Subsection
This is a subsection heading
<neura::heading level="h1" size="xl">Page Title</neura::heading>
<neura::heading level="h2" size="lg">Section Title</neura::heading>
<neura::heading level="h3" size="md">Subsection</neura::heading>Use Cases
Page Header
Welcome to Our Platform
Build amazing things with our design system
Card Headings
Card Title
Card content goes here...
Section Dividers
First Section
Content for first section...
Second Section
Content for second section...
Best Practices
✓ Do
- Use heading levels hierarchically (h1, then h2, then h3, etc.)
- Only one h1 per page for the main title
- Use size to create a consistent visual hierarchy
- Respect semantic HTML structure for accessibility
✗ Don't
- Don't skip levels (h1 directly followed by h3)
- Don't use multiple h1s on the same page
- Don't use headings only for styling (use CSS classes)
- Don't ignore semantic hierarchy
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| level | string | 'h2' | HTML heading level. Values: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' |
| size | string | 'sm' | Text size. Values: 'xs' (text-sm), 'sm' (text-base), 'md' (text-lg), 'lg' (text-xl), 'xl' (text-2xl) |
| align | string|null | null | Text alignment. Values: 'left', 'center', 'right' |