Typography

Headings

Body & Caption

Typography component for displaying text with consistent theme styles.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintTypography } from '@getufy/flint-ui';

html

<flint-typography></flint-typography>

Property	Attribute	Type	Default	Description
`variant`	`variant`	`\| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'subtitle1' \| 'subtitle2' \| 'body1' \| 'body2' \| 'caption' \| 'overline' \| 'inherit'`	`'body1'`	Variant of the typography.
`color`	`color`	`\| 'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'textPrimary' \| 'textSecondary' \| 'inherit'`	`'textPrimary'`	The color of the text.
`component`	`component`	`string \| undefined`	—	Override the rendered HTML tag.
`align`	`align`	`'left' \| 'center' \| 'right' \| 'justify'`	`'left'`	Text alignment.
`noWrap`	`noWrap`	`boolean`	`false`	If true, text is truncated with an ellipsis.
`gutterBottom`	`gutterBottom`	`boolean`	`false`	If true, adds a bottom margin.
`paragraph`	`paragraph`	`boolean`	`false`	If true, adds paragraph margin bottom.

Name	Description
`(default)`	The text content.

Name	Description
`base`	The component's base wrapper element.

Typography ​