Text

import { ... } from '@ag.ds-next/react/text';

Text uses the fontGrid function to make the font-size and line-height snap to grid.

Sizes

There are seven font sizes available, sm is the default.

<Stack gap={0}>
	<Text as="p" fontSize="xs">
		This is some text (xs)
	</Text>
	<Text as="p" fontSize="sm">
		This is some text (sm)
	</Text>
	<Text as="p" fontSize="md">
		This is some text (md)
	</Text>
	<Text as="p" fontSize="lg">
		This is some text (lg)
	</Text>
	<Text as="p" fontSize="xl">
		This is some text (xl)
	</Text>
	<Text as="p" fontSize="xxl">
		This is some text (xxl)
	</Text>
	<Text as="p" fontSize="xxxl">
		This is some text (xxxl)
	</Text>
</Stack>

Weights

There are two font weights available, normal is the default.

<Stack gap={0}>
	<Text as="p" fontWeight="normal">
		Normal (default)
	</Text>
	<Text as="p" fontWeight="bold">
		Bold
	</Text>
</Stack>

The ‘as’ prop

By default, the Text component renders as an HTML span element. This can be changed to render paragraphs and other appropriate elements by passing a relevant as prop.

Related components

• Heading – Headings are a typographic component that create semantic structure, allow users to scan content by creating relative visual prominence and support search engine optimisation.
• List – Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.
• Text link – A typographic component for creating hyperlinks.