@spectrum-css/typography/stories/typography.mdx

The Spectrum CSS typography component

import {
	Meta,
	Title,
	Subtitle,
	Description,
	ArgTypes,
	Canvas,
	Source,
	Story,
} from "@storybook/blocks";
import {
	ComponentDetails,
	TaggedReleases,
	PropertiesTable,
} from "@spectrum-css/preview/blocks";

import * as TypographyStories from "./typography.stories";

<Meta of={TypographyStories} title="Docs" />

<Title of={TypographyStories} />
<Subtitle of={TypographyStories} />
<ComponentDetails of={TypographyStories} />

Spectrum typography is broken out into several separate components: [heading](#heading), [body](#body), [detail](#detail), and [code](#code). [Internationalized typography examples](#internationalization) are also shown.

<Description of={TypographyStories.Default} />
<Canvas of={TypographyStories.Default} />

## Heading

<Description of={TypographyStories.HeadingVariants} />
<Canvas of={TypographyStories.HeadingVariants} />

### Heading sizes

<Description of={TypographyStories.HeadingSizes} />
<Canvas of={TypographyStories.HeadingSizes} />

## Body

<Description of={TypographyStories.BodyVariants} />
<Canvas of={TypographyStories.BodyVariants} />

### Body sizes

<Description of={TypographyStories.BodySizes} />
<Canvas of={TypographyStories.BodySizes} />

## Heading and body pairings

<Description of={TypographyStories.HeadingBodyHierarchy} />
<Canvas of={TypographyStories.HeadingBodyHierarchy} />

## Detail

<Description of={TypographyStories.DetailVariants} />
<Canvas of={TypographyStories.DetailVariants} />

### Detail sizes

<Description of={TypographyStories.DetailSizes} />
<Canvas of={TypographyStories.DetailSizes} />

## Code

<Description of={TypographyStories.CodeVariants} />
<Canvas of={TypographyStories.CodeVariants} />

### Code sizes

<Description of={TypographyStories.CodeSizes} />
<Canvas of={TypographyStories.CodeSizes} />

## Internationalized typography

### Internationalized heading

<Description of={TypographyStories.InternationalizedHeading} />
<Canvas of={TypographyStories.InternationalizedHeading} />

### Internationalized body

<Description of={TypographyStories.InternationalizedBody} />
<Canvas of={TypographyStories.InternationalizedBody} />

## Internationalized heading and body pairings

<Description of={TypographyStories.InternationalizedHeadingBodyHierarchy} />
<Canvas of={TypographyStories.InternationalizedHeadingBodyHierarchy} />

### Internationalized detail

<Description of={TypographyStories.InternationalizedDetail} />
<Canvas of={TypographyStories.InternationalizedDetail} />

### Internationalized code

<Description of={TypographyStories.InternationalizedCode} />
<Canvas of={TypographyStories.InternationalizedCode} />

## Properties

The component accepts the following inputs (properties):

<ArgTypes />

<PropertiesTable />

## Tagged releases

<TaggedReleases />