1. Home
  2. Docs
  3. Components
  4. Typography
  5. Lead

Lead

A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. The lead paragraph should only be used once per page. This is a lead paragraph.

Usage

LeadExample.tsx
  1. 1
<Lead>This is a lead paragraph.</Lead>

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

This is a lead paragraph.

Features

  • Can be used to summarise the content of a page.
  • Opts-in to your design system's typographic styles.

Source

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


export { Lead }

Styling

tailwind.css
  1. 1
  2. 2
  3. 3
.lead {
	@apply text-muted-500 my-fluid-11 text-fluid-xl max-w-prose font-normal leading-relaxed tracking-tight;
}