## Heading Widget

The Heading widget adds formatted text headings to your reports for organization and structure. Use headings to divide reports into sections, add context, or create visual hierarchy.

### When to Use

- Divide long reports into logical sections
- Add context or explanations between widgets
- Create visual hierarchy in complex reports
- Label groups of related widgets
- Add emphasis to important sections

#### Configuration Options

### Content Settings

### Title (Required)

What it is: The heading text to display

Examples:

- "Revenue Analysis"
- "Top Performing Products"
- "Marketing Performance"
- "Quarterly Breakdown"

### Heading Type (Required)

Options:

- H1 - Main Heading: Largest, use for report title
- H2 - Section Heading: Major sections
- H3 - Subsection Heading: Subsections within sections
- H4 - Minor Heading (default): Widget groups, small sections
- H5 - Small Heading: Minor labels
- H6 - Tiny Heading: Smallest, for subtle labels

Hierarchy rules:

- Use H1 once per report (at top)
- Use H2 for main sections
- Use H3 for subsections within H2 sections
- Use H4 for minor divisions

#### Design Settings

### Icon

What it is: Optional icon displayed next to heading text

Available icons: 50+ Material Icons

Popular choices:

- bar_chart - For analytics sections
- shopping_cart - For product/order sections
- trending_up - For performance sections
- activity - For marketing sections
- inventory_2 - For product sections
- people - For customer sections

Default: bar_chart

### Color Theme

Options: Blue, Green, Purple, Orange, Red, Gray

What it affects:

- Text color (or background color depending on style)
- Icon color
- Accent line or border

#### Responsive Width

Desktop/Tablet/Mobile Columns (1-12)

Recommended: Full width (12 columns) for section headers

### Visual Examples

#### H1 - Main Heading

    	[bar_chart icon] QUARTERLY REPORT Q4 2024

### H2 - Section Heading

    	[attach_money icon] Revenue Analysis

#### H3 - Subsection Heading

    	━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    [inventory_2 icon] Product Performance
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

### H4 - Minor Heading

    	[trending_up icon] Top Sellers

#### Example Configurations

#### Example 1: Report Title

    	Title: Monthly Profit Report - January 2024
    Heading Type: H1
    Icon: receipt
    Color: Blue
    Width: 12 columns

#### Example 2: Section Divider

    	Title: Marketing Performance
    Heading Type: H2
    Icon: activity
    Color: Orange
    Width: 12 columns

#### Example 3: Widget Group Label

    	Title: Top Products
    Heading Type: H4
    Icon: shopping_cart
    Color: Green
    Width: 12 columns

#### Example 4: Subsection

    	Title: Traffic Sources
    Heading Type: H3
    Icon: analytics
    Color: Purple
    Width: 12 columns

### Report Structure Example

Using headings to organize a comprehensive report:

    	┌ H1: Q4 2024 Performance Report ┐
    │                                 │
    │ [Metric Cards: Revenue, Profit] │
    │                                 │
    ├─ H2: Revenue Analysis ──────────┤
    │                                 │
    │ [Line Chart: Revenue Trend]     │
    │ [Table: Revenue by Category]    │
    │                                 │
    ├─ H2: Product Performance ───────┤
    │                                 │
    │  ┌ H3: Top Sellers ┐            │
    │  │                 │            │
    │  │ [Bar Chart: Top 10 Products] │
    │  └─────────────────┘            │
    │                                 │
    │  ┌ H3: Low Performers ┐         │
    │  │                    │         │
    │  │ [Table: Bottom 10 Products]  │
    │  └────────────────────┘         │
    │                                 │
    ├─ H2: Marketing Insights ────────┤
    │                                 │
    │ [Pie Chart: Traffic Sources]    │
    │ [Table: Campaign Performance]   │
    │                                 │
    └─────────────────────────────────┘

#### Best Practices

### Heading Hierarchy

- Use proper nesting: H1 → H2 → H3 → H4
- Don't skip levels (don't go H1 → H3)
- One H1 per report (the report title)
- Use H2 for major sections (3-5 per report)
- Use H3-H4 for subsections as needed

#### Heading Text

- Keep concise (2-6 words)
- Be descriptive and clear
- Use title case for H1-H2
- Use sentence case for H3-H4

### Icon Usage

- Use icons that represent the section content
- Be consistent (same icon for similar sections across reports)
- Don't overuse icons - can be distracting
- H1-H2: Include icons
- H3-H4: Optional, use sparingly

### Color Coding

- Use colors to group related sections
- Blue: General/overview sections
- Green: Profit/performance sections
- Orange: Marketing/campaigns
- Purple: Products/inventory
- Red: Costs/expenses/problems

#### Spacing

- Add heading before each major section
- Leave visual space around headings
- Don't stack headings (heading followed immediately by another heading)

### Common Use Cases

#### Report Title

H1 at very top of report:

- Full report name and date range
- Large, prominent
- Sets context for entire report

### Section Dividers

H2 between major report sections:

- "Executive Summary"
- "Revenue Analysis"
- "Product Performance"
- "Marketing Insights"

#### Widget Group Labels

H4 above related widget groups:

- "Top 10 Products" above product charts
- "Traffic Breakdown" above traffic widgets
- "Cost Summary" above cost metrics

### Contextual Notes

H5-H6 for small labels or notes:

- "All values exclude tax"
- "Updated daily at 2am"
- "Includes refunds"

#### Creating Professional Reports

### Executive Report Template

1. H1: "Executive Summary - [Month/Quarter]"
2. Metric cards (Revenue, Profit, Orders, Margin)
3. H2: "Performance Overview"
4. Line chart (Revenue and Profit trend)
5. H2: "Product Analysis"
6. H3: "Top Performers"
7. Bar chart and table
8. H3: "Underperformers"
9. Table
10. H2: "Marketing Performance"
11. Campaign data and charts

### Dashboard Template

1. H2: "Overview" (skip H1 for dashboards)
2. Metric cards
3. H2: "Today's Activity"
4. Real-time widgets
5. H2: "Trends"
6. Charts

### Analysis Report Template

1. H1: "[Analysis Topic]"
2. H2: "Summary"
3. Overview widgets
4. H2: "Detailed Analysis"
5. H3: "By Product"
6. Product widgets
7. H3: "By Traffic Source"
8. Traffic widgets
9. H2: "Recommendations"
10. Summary findings

#### Accessibility

- Proper heading hierarchy helps screen readers
- Icons provide visual cues
- Semantic HTML headings (H1-H6)
- Color themes provide visual organization

### Tips

#### Don't Overuse

- Too many headings clutters the report
- Use only when adding genuine organizational value
- 3-7 headings per report is typical

### Combine with Layout

- Headings work well with horizontal rules or spacing
- Use to separate distinct sections visually
- Can span multiple rows of widgets

#### Mobile Considerations

- Headings remain full width on mobile (good!)
- Helps maintain structure on small screens
- Keep heading text concise for mobile readability

### Related Widgets

- Metric Card Widget - Display metrics
- Creating Custom Reports - Report structure