Text

Typography component for headings and body text.

Import

import '@kittl/ui';

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

Usage

<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
>

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

/** Basic Text usage, rendered live on the docs site. */
export const TextUsage = () => (
  <>
    <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	Attribute	Type	Default	Description
variant	variant	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p0' | 'p1' | 'p2' | 'p3' | 'p4'	'p1'	Typography variant
color	color	'default' | 'secondary' | 'tertiary' | 'disabled' | 'critical' | 'info' | 'brand-on-bg' | 'theme-agnostic-white' | 'inherit'	'default'	Text color
textAlign	textAlign	'left' | 'center' | 'right'	—	Horizontal alignment; inherits from the parent when unset
truncate	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