Headline

A typography component used for prominent structural headings across content sections.

The quick brown fox jumps over the lazy dog

Sizes

Use the headline-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available font size utilities, visit Tailwind

The quick brown fox jumps over the lazy dog

Customizing

globals.css


:root {
  --ex-headline-font-size-sm: var(--text-2xl);
  --ex-headline-font-size-md: var(--text-3xl);
  --ex-headline-font-size-lg: var(--text-4xl);
  --ex-headline-font-size-xl: var(--text-5xl);
 
  --ex-headline-line-height-sm: var(--text-2xl-line-height);
  --ex-headline-line-height-md: var(--text-3xl-line-height);
  --ex-headline-line-height-lg: var(--text-4xl-line-height);
  --ex-headline-line-height-xl: var(--text-5xl-line-height);
 
  --ex-headline-font-family-sm: var(--font-sans);
  --ex-headline-font-family-md: var(--font-sans);
  --ex-headline-font-family-lg: var(--font-sans);
  --ex-headline-font-family-xl: var(--font-sans);
 
  --ex-headline-font-weight-sm: var(--font-weight-semibold);
  --ex-headline-font-weight-md: var(--font-weight-semibold);
  --ex-headline-font-weight-lg: var(--font-weight-semibold);
  --ex-headline-font-weight-xl: var(--font-weight-semibold);
}

API

Element	Selector
`Headline`	`.ex-headline`

Prop	Type	Default
`as`	`ElementType`	`h2`
`asChild`	`boolean`	`false`