Title Section
Title Section
Title Section provides a flexible container for section titles with configurable alignment, layout modes, and optional top line separator.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Font Size | 18-24px (primary) |
| Font Weight | 600-700 (bold) |
| Line Height | 1.2-1.4 |
| Padding | 8-16px vertical |
| Top Line Height | 1-2px |
Layout Modes
Section titled “Layout Modes”Single title with configurable alignment
Two titles positioned at opposite edges
Horizontal row layout for content
Vertical column layout for content
| Option | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'duo' | 'single' | Single or dual title mode |
align | 'left' | 'center' | 'right' | 'left' | Horizontal alignment |
position | 'left' | 'middle' | 'right' | 'middle' | Justification position |
flexDirection | 'row' | 'column' | 'row' | Content layout direction |
hasTopLine | boolean | false | Show top separator line |
customClass | string | undefined | Additional CSS classes |
Alignment Combinations
Section titled “Alignment Combinations”| Align | Position | Result |
|---|---|---|
left | left | Left-aligned, left-justified |
left | middle | Left-aligned, center-justified |
center | middle | Center-aligned, center-justified |
right | right | Right-aligned, right-justified |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Section headers in content areas
- Page or card titles
- Divider between content sections
- Duo titles for price/action combos
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use for clear section separation | Overuse in short content |
| Match alignment to content layout | Mix alignments inconsistently |
| Use top line for visual separation | Add decorative elements |
| Keep titles concise | Long multi-line titles |