1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

<div className="bg-muted-100 rounded-lg p-4">
	<Eyebrow>Typography</Eyebrow>
	<H1>Typography is complex</H1>
	<P>
		An headline's eyebrow comes second in the typographic hierarchy and sits above the main headline (like your eyebrow sits above your eye). These eyebrow headlines are usually
		keyword labels that help users understand the theme of the content they're about to read.
	</P>
</div>

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

import { type HTMLAttributes, forwardRef } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A Eyebrow component.
 */
const Eyebrow = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => <p ref={ref} className={cn('eyebrow', className)} {...props} />)
Eyebrow.displayName = 'Eyebrow'

export { Eyebrow }

1. 1
2. 2
3. 3

.eyebrow {
	@apply text-muted-400 mb-4 max-w-prose text-xs font-sans font-medium uppercase tracking-wider;
}