You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.

components / Content

Text

Content

Text

Anvil has 3 text components to support consistent typography throughout the application.

Overview
Headline
Body Text
Eyebrow
Text
deprecated

Deprecated

Please use more specific typography components like Headlineand BodyText instead.

Sizes

<>
	<Text>This is default state</Text>
	<Text size='7'>Text '7' size | 41px</Text>
	<Text size='6'>Text '6' size | 32px</Text>
	<Text size='5'>Text '5' size | 26px</Text>
	<Text size='4'>Text '4' size | 20px</Text>
	<Text size='3'>Text '3' size | 16px</Text>
	<Text size='2'>Text '2' size | 14px</Text>
	<Text size='1'>Text '1' size | 12px</Text>
	<Text size='0'>Text '0' size | 10px</Text>
</>

Styles

<>
	<Text>This is default state</Text>
	<Text bold>Text 'bold'</Text>
	<Text italic>Text 'italic'</Text>
	<Text inline>Text 'inline' </Text>
	<Text inline subdued>Text 'inline & subdued' </Text>
</>

Best Practices

Refer to typography for best practices.

Importing

import { Text } from '@servicetitan/design-system';