Text

Typography component for headings and body text.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Text } from '@kittl/ui-react';

Usage

Web Component

<kittl-text variant="h2">Heading</kittl-text>
<kittl-text variant="p1">Body paragraph text.</kittl-text>
<kittl-text variant="p3" color="secondary">Small secondary text.</kittl-text>
<kittl-text variant="p1" truncate>This long text will be truncated with an ellipsis.</kittl-text>

React

<Text variant="h2">Heading</Text>
<Text variant="p1">Body paragraph text.</Text>
<Text variant="p3" color="secondary">Small secondary text.</Text>
<Text variant="p1" truncate>This long text will be truncated with an ellipsis.</Text>

Props

Property	Type	Default	Description
variant	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p0' | 'p1' | 'p2' | 'p3' | 'p4'	'p1'	Typography variant
color	'default' | 'secondary' | 'tertiary' | 'disabled' | 'critical' | 'info' | 'brand-on-bg' | 'inherit'	'default'	Text color
truncate	boolean	false	Truncate with ellipsis on overflow

Variant Guide

Variant	Use case
h1–h6	Headings (largest to smallest)
p0	Large body text
p1	Default body text
p2	Small body text
p3	Caption text
p4	Smallest text