Typography

Typography component for consistent text styling. Automatically selects appropriate HTML tag based on variant.

Import

import { Typography } from 'vuiii'

Basic Usage

View in Storybook

// Different variants
import { Typography } from 'vuiii'

<Typography variant="display">Display Text</Typography>
<Typography variant="heading1">Heading 1</Typography>
<Typography variant="heading2">Heading 2</Typography>
<Typography variant="body1">Body text paragraph</Typography>
<Typography variant="caption">Small caption text</Typography>
<Typography variant="label">Form label</Typography>

More Examples

// Automatic tag selection
<Typography variant="heading1">Renders as h1</Typography>
<Typography variant="body1">Renders as p</Typography>
<Typography variant="label">Renders as span</Typography>

// Override the HTML tag
<Typography variant="heading1" tag="h2">
  Styled as heading1, but renders as h2
</Typography>

// Available variants and their default tags:
// display -> h1
// heading1 -> h1
// heading2 -> h2
// heading3 -> h3
// heading4 -> h4
// heading5 -> h5
// heading6 -> h6
// body1 -> p
// body2 -> p
// label -> span
// caption -> span

Storybook

For interactive examples with all variants, see Typography in Storybook.