Skip to Content
Dashflow Logo

H6 Component

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

Overview

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

Basic Usage

import { H6 } from '@dashflowx/core'


export default function H6Example() {
  return (
    <H6>Smallest Heading</H6>
  )
}

Preview:

Heading 6

Props

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

Examples

Basic Smallest Heading

import { H6 } from '@dashflowx/core'


export default function BasicH6() {
  return (
    <H6>Smallest Section</H6>
  )
}

Preview:

Smallest Section

Styled Smallest Heading

import { H6 } from '@dashflowx/core'


export default function StyledH6() {
  return (
    <H6 className="text-emerald-600">
      Fine Details
    </H6>
  )
}

Preview:

Fine Details

Custom Styled Heading

import { H6 } from '@dashflowx/core'


export default function CustomH6() {
  return (
    <H6 className="text-base font-bold text-rose-600 border-l-4 border-rose-600 pl-4">
      Micro Notes
    </H6>
  )
}

Preview:

Micro Notes

Common Use Cases

Smallest Section Header

const smallestSectionHeader = (
  <H6 className="mb-2">
    Fine Print
  </H6>
);

Detail Header

const detailHeader = (
  <H6 className="mb-2">
    Additional Info
  </H6>
);

Note Header

const noteHeader = (
  <H6 className="mb-2">
    Side Notes
  </H6>
);

Best Practices

1. Proper Hierarchy

Use H6 for the smallest headings under H5.

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


// ❌ Avoid - Skipping levels
<H1>Main Title</H1>
<H6>Smallest Heading</H6>

2. Clear Smallest Headings

Use clear and descriptive smallest headings.

// ✅ Good - Clear
<H6>Implementation Details</H6>


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

3. Consistent Styling

Maintain consistent styling across smallest headings.

// ✅ Good - Consistent
<H6 className="mb-2">Smallest 1</H6>
<H6 className="mb-2">Smallest 2</H6>


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

API Reference

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

Edit this page on GitHub
previousH5