H2

1. 1

<H2>This is an h2 heading</H2>

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 h2 component.
 */
const H2 = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => <h2 ref={ref} className={cn('h2', className)} {...props} />)
H2.displayName = 'H2'

export { H2 }

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12

.h2 {
	@apply text-muted-900 mt-fluid-14 mb-fluid-11 text-fluid-3xl max-w-prose font-sans font-bold capitalize;
	/* If h2 has h3 after it */
	&:has(+ .h3) {
		@apply mb-fluid-9;
	}
	/* Typographical elements after h2 */
	& + .h3,
	& + .p {
		@apply mt-0;
	}
}