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