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.