Skip to Content
Dashflow Logo

H5 Component

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

Overview

The H5 component provides a styled heading element for minor headings. It's designed to be visually prominent while maintaining proper hierarchy below H4 headings.

Basic Usage

import { H5 } from '@dashflowx/core'


export default function H5Example() {
  return (
    <H5>Minor Heading</H5>
  )
}

Preview:

Heading 6

Props

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

Examples

Basic Minor Heading

import { H5 } from '@dashflowx/core'


export default function BasicH5() {
  return (
    <H5>Minor Section</H5>
  )
}

Preview:

Minor Section

Styled Minor Heading

import { H5 } from '@dashflowx/core'


export default function StyledH5() {
  return (
    <H5 className="text-teal-600">
      Additional Details
    </H5>
  )
}

Preview:

Additional Details

Custom Styled Heading

import { H5 } from '@dashflowx/core'


export default function CustomH5() {
  return (
    <H5 className="text-lg font-bold text-cyan-600 border-l-4 border-cyan-600 pl-4">
      Quick Notes
    </H5>
  )
}

Preview:

Quick Notes

Common Use Cases

Minor Section Header

const minorSectionHeader = (
  <H5 className="mb-2">
    Quick Reference
  </H5>
);

Detail Header

const detailHeader = (
  <H5 className="mb-2">
    Examples
  </H5>
);

Note Header

const noteHeader = (
  <H5 className="mb-2">
    Tips
  </H5>
);

Best Practices

1. Proper Hierarchy

Use H5 for minor headings under H4.

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


// ❌ Avoid - Skipping levels
<H1>Main Title</H1>
<H5>Minor Heading</H5>

2. Clear Minor Headings

Use clear and descriptive minor headings.

// ✅ Good - Clear
<H5>Usage Examples</H5>


// ❌ Avoid - Unclear
<H5>Stuff</H5>

3. Consistent Styling

Maintain consistent styling across minor headings.

// ✅ Good - Consistent
<H5 className="mb-2">Minor 1</H5>
<H5 className="mb-2">Minor 2</H5>


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

API Reference

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

Edit this page on GitHub
previousH4