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.
Colour
AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.
This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).
Light palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}> <Stack gap={1.5}> <H3>Text: on light background</H3> <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> </Stack> </Box>
Dark palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark"> <Stack gap={1.5}> <H3>Text: on dark background</H3> <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> </Stack> </Box>
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.