Skip to content
Vy logo
Components

Text

Text is used for anything from microcopy to good old paragraphs of text.

Examples

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 &apos;fontSize&apos; you must specify with fontSize=&#91;&quot;mobile.lg&quot;, &quot;desktop.lg&quot;&#93;
</Text>