Skip to Content
Dashflow Logo

H3 Component

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

Overview

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

Basic Usage

import { H3 } from '@dashflowx/core'


export default function H3Example() {
  return (
    <H3>Subsection Title</H3>
  )
}

Preview:

Heading 6

Props

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

Examples

Basic Subsection Heading

import { H3 } from '@dashflowx/core'


export default function BasicH3() {
  return (
    <H3>Product Details</H3>
  )
}

Preview:

Product Details

Styled Subsection Heading

import { H3 } from '@dashflowx/core'


export default function StyledH3() {
  return (
    <H3 className="text-green-600">
      Pricing Information
    </H3>
  )
}

Preview:

Pricing Information

Custom Styled Heading

import { H3 } from '@dashflowx/core'


export default function CustomH3() {
  return (
    <H3 className="text-2xl font-bold text-purple-600 border-l-4 border-purple-600 pl-4">
      Special Features
    </H3>
  )
}

Preview:

Special Features

Common Use Cases

Subsection Header

const subsectionHeader = (
  <H3 className="mb-4">
    Technical Specifications
  </H3>
);

Feature Subsection

const featureSubsection = (
  <H3 className="mb-3">
    Advanced Options
  </H3>
);

Content Subsection

const contentSubsection = (
  <H3 className="mb-4">
    Additional Information
  </H3>
);

Best Practices

1. Proper Hierarchy

Use H3 for subsections under H2.

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


// ❌ Avoid - Skipping levels
<H1>Main Title</H1>
<H3>Subsection Title</H3>

2. Clear Subsection Titles

Use clear and descriptive subsection titles.

// ✅ Good - Clear
<H3>Installation Instructions</H3>


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

3. Consistent Styling

Maintain consistent styling across subsections.

// ✅ Good - Consistent
<H3 className="mb-4">Subsection 1</H3>
<H3 className="mb-4">Subsection 2</H3>


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

API Reference

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

Edit this page on GitHub
previousH2