README
title: Text description: A primitive typographic component for constrained text styles group: Foundations
This package includes the components <Text />
and <TextLink />
.
Text
and TextLink
use 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>
TextLink
The TextLink
component creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
<Text>
This is some text with <TextLink href="#">a link</TextLink> inside.
</Text>