Skip to Content
Dashflow Logo

H4 Component

A comprehensive guide to using the H4 component with examples, props, and best practices.

Overview

The H4 component provides a styled heading element for sub-subsection titles. It's designed to be visually prominent while maintaining proper hierarchy below H3 headings.

Basic Usage

import { H4 } from '@dashflowx/core'


export default function H4Example() {
  return (
    <H4>Sub-subsection Title</H4>
  )
}

Preview:

Heading 6

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes for the heading
childrenReactNode-The heading text content

Examples

Basic Sub-subsection Heading

import { H4 } from '@dashflowx/core'


export default function BasicH4() {
  return (
    <H4>Technical Details</H4>
  )
}

Preview:

Technical Details

Styled Sub-subsection Heading

import { H4 } from '@dashflowx/core'


export default function StyledH4() {
  return (
    <H4 className="text-indigo-600">
      Implementation Notes
    </H4>
  )
}

Preview:

Implementation Notes

Custom Styled Heading

import { H4 } from '@dashflowx/core'


export default function CustomH4() {
  return (
    <H4 className="text-xl font-bold text-orange-600 border-l-4 border-orange-600 pl-4">
      Important Notes
    </H4>
  )
}

Preview:

Important Notes

Common Use Cases

Sub-subsection Header

const subSubsectionHeader = (
  <H4 className="mb-3">
    Configuration Options
  </H4>
);

Detail Section

const detailSection = (
  <H4 className="mb-3">
    Additional Information
  </H4>
);

Note Section

const noteSection = (
  <H4 className="mb-3">
    Important Considerations
  </H4>
);

Best Practices

1. Proper Hierarchy

Use H4 for sub-subsections under H3.

// ✅ Good - Proper hierarchy
<H1>Main Title</H1>
<H2>Section Title</H2>
<H3>Subsection Title</H3>
<H4>Sub-subsection Title</H4>


// ❌ Avoid - Skipping levels
<H1>Main Title</H1>
<H4>Sub-subsection Title</H4>

2. Clear Sub-subsection Titles

Use clear and descriptive sub-subsection titles.

// ✅ Good - Clear
<H4>API Endpoints</H4>


// ❌ Avoid - Unclear
<H4>Info</H4>

3. Consistent Styling

Maintain consistent styling across sub-subsections.

// ✅ Good - Consistent
<H4 className="mb-3">Sub-subsection 1</H4>
<H4 className="mb-3">Sub-subsection 2</H4>


// ❌ Avoid - Inconsistent
<H4 className="mb-1">Sub-subsection 1</H4>
<H4 className="mb-5">Sub-subsection 2</H4>
  • H1: For main page titles
  • H2: For section headings
  • H3: For subsection headings
  • H5: For minor headings
  • H6: For smallest headings
  • Typography: For general text styling

API Reference

For the complete API reference and advanced usage patterns, see the H4 API documentation.

Edit this page on GitHub
previousH3