Title

A typography component used to style distinct page titles or modal headings with proper weights.

The quick brown fox jumps over the lazy dog

Sizes

Use the title-{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-title-font-size-xs: var(--text-xs);
  --ex-title-font-size-sm: var(--text-sm);
  --ex-title-font-size-md: var(--text-base);
  --ex-title-font-size-lg: var(--text-lg);
  --ex-title-font-size-xl: var(--text-xl);
  --ex-title-font-size-2xl: var(--text-2xl);
 
  --ex-title-line-height-xs: var(--text-xs-line-height);
  --ex-title-line-height-sm: var(--text-sm-line-height);
  --ex-title-line-height-md: var(--text-base-line-height);
  --ex-title-line-height-lg: var(--text-lg-line-height);
  --ex-title-line-height-xl: var(--text-xl-line-height);
  --ex-title-line-height-2xl: var(--text-2xl-line-height);
 
  --ex-title-font-family-xs: var(--font-sans);
  --ex-title-font-family-sm: var(--font-sans);
  --ex-title-font-family-md: var(--font-sans);
  --ex-title-font-family-lg: var(--font-sans);
  --ex-title-font-family-xl: var(--font-sans);
  --ex-title-font-family-2xl: var(--font-sans);
 
  --ex-title-font-weight-xs: var(--font-weight-semibold);
  --ex-title-font-weight-sm: var(--font-weight-semibold);
  --ex-title-font-weight-md: var(--font-weight-semibold);
  --ex-title-font-weight-lg: var(--font-weight-semibold);
  --ex-title-font-weight-xl: var(--font-weight-semibold);
  --ex-title-font-weight-2xl: var(--font-weight-semibold);
}

API

Element	Selector
`Title`	`.ex-title`

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