Site settings
Change the appearance of the site to suit your preferences
Text
Text is used for anything from microcopy to good old paragraphs of text.
The different text sizes
<Stack> <Text variant="xxl">xxl - I am 50px on desktop, and 36px on mobile</Text> <Text variant="xl-display">xl-display - I am 40px on desktop, and 30px on mobile</Text> <Text variant="xl-sans">xl-sans - I am 40px on desktop, and 30px on mobile</Text> <Text variant="lg">lg - I am 30px on desktop, and 24px on mobile</Text> <Text variant="md-lg">md-lg - I am 24px on desktop, and 21px on mobile</Text> <Text variant="md">md - I am 21px on desktop, and 18px on mobile</Text> <Text variant="sm">sm - I am 18px on desktop, and 16px on mobile</Text> <Text variant="xs">xs - I am 16px on desktop, and 14px on mobile</Text> <Text variant="2xs">2xs - I am 14px on desktop, and 12px on mobile</Text> </Stack>
You can also customize text by specifying fontSize and or lineHeight.
Specified fontSize will however not change dynamically on mobile / desktop, like variant does.
the lineClamp prop will truncate the text after a certain number of lines
<Text fontSize="desktop.lg" lineHeight="taller" maxWidth="800px" lineClamp="3"> I am 30px on both mobile and desktop. If you want me to change dynamically while still using 'fontSize' you must specify with fontSize=["mobile.lg", "desktop.lg"] </Text>