Skip to Content
Dashflow Logo

H2 Component

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

Overview

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

Basic Usage

import { H2 } from '@dashflowx/core'


export default function H2Example() {
  return (
    <H2>Section Title</H2>
  )
}

Preview:

Heading 6

Props

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

Examples

Basic Section Heading

import { H2 } from '@dashflowx/core'


export default function BasicH2() {
  return (
    <H2>Our Services</H2>
  )
}

Preview:

Our Services

Styled Section Heading

import { H2 } from '@dashflowx/core'


export default function StyledH2() {
  return (
    <H2 className="text-blue-600 text-center">
      Featured Products
    </H2>
  )
}

Preview:

Featured Products

Custom Styled Heading

import { H2 } from '@dashflowx/core'


export default function CustomH2() {
  return (
    <H2 className="text-3xl font-bold text-gray-800 border-b-2 border-green-500 pb-3">
      Success Stories
    </H2>
  )
}

Preview:

Success Stories

Common Use Cases

Section Header

const sectionHeader = (
  <H2 className="mb-6">
    About Us
  </H2>
);

Feature Section

const featureSection = (
  <H2 className="text-center mb-8">
    Key Features
  </H2>
);

Product Category

const productCategory = (
  <H2 className="mb-4">
    Electronics
  </H2>
);

Best Practices

1. Proper Hierarchy

Use H2 for main sections under H1.

// ✅ 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. Descriptive Content

Use clear and descriptive section titles.

// ✅ Good - Descriptive
<H2>Customer Testimonials</H2>


// ❌ Avoid - Generic
<H2>Section</H2>

3. Consistent Styling

Maintain consistent styling across sections.

// ✅ Good - Consistent
<H2 className="mb-6">Section 1</H2>
<H2 className="mb-6">Section 2</H2>


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

API Reference

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

Edit this page on GitHub
previousH1