Display

A typography component that renders extra-large text for high-impact visual statements and headlines.

The quick brown fox jumps over the lazy dog

Sizes

Use the display-{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-display-font-size-sm: var(--text-6xl);
  --ex-display-font-size-md: var(--text-7xl);
  --ex-display-font-size-lg: var(--text-8xl);
  --ex-display-font-size-xl: var(--text-9xl);
 
  --ex-display-line-height-sm: var(--text-6xl-line-height);
  --ex-display-line-height-md: var(--text-7xl-line-height);
  --ex-display-line-height-lg: var(--text-8xl-line-height);
  --ex-display-line-height-xl: var(--text-9xl-line-height);
 
  --ex-display-font-family-sm: var(--font-sans);
  --ex-display-font-family-md: var(--font-sans);
  --ex-display-font-family-lg: var(--font-sans);
  --ex-display-font-family-xl: var(--font-sans);
 
  --ex-display-font-weight-sm: var(--font-weight-semibold);
  --ex-display-font-weight-md: var(--font-weight-semibold);
  --ex-display-font-weight-lg: var(--font-weight-semibold);
  --ex-display-font-weight-xl: var(--font-weight-semibold);
}

API

Element	Selector
`Headline`	`.ex-display`

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