H5

H5 heading component.

Usage

H5Example.tsx
  1. 1
<H5>This is an h5 heading</H5>

Here's the <H5 /> component in action.

This is an h5 heading

Features

  • Drop-in replacement for the native <h5> element.
  • Opts-in to your design system's typographic styles.

Parts and their API

Source

h5.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'
/**
* A h5 component.
*/
const H5 = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => <h5 ref={ref} className={cn('h5', className)} {...props} />)
H5.displayName = 'H5'
export { H5 }

Styling

tailwind.css
  1. 1
  2. 2
  3. 3
.h5 {
@apply text-muted-900 text-fluid-lg max-w-prose font-sans font-bold;
}