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.