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
-
H1: "Executive Summary - [Month/Quarter]"
- Metric cards (Revenue, Profit, Orders, Margin)
-
H2: "Performance Overview"
- Line chart (Revenue and Profit trend)
-
H2: "Product Analysis"
-
H3: "Top Performers"
- Bar chart and table
-
H3: "Underperformers"
- Table
-
H2: "Marketing Performance"
- Campaign data and charts
Dashboard Template
-
H2: "Overview" (skip H1 for dashboards)
- Metric cards
-
H2: "Today's Activity"
- Real-time widgets
-
H2: "Trends"
- Charts
Analysis Report Template
-
H1: "[Analysis Topic]"
-
H2: "Summary"
- Overview widgets
-
H2: "Detailed Analysis"
-
H3: "By Product"
- Product widgets
-
H3: "By Traffic Source"
- Traffic widgets
-
H2: "Recommendations"
- 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