Text

    <>
      <Text size="s">Size s</Text>
      <Text size="m">Size m</Text>
      <Text size="l">Size l</Text>
      <Text size="xl">Size xl</Text>
      <Text size="xxl">Size xxl</Text>
    </>
  

    <>
      <Text weight="normal">Weight normal</Text>
      <Text weight="medium">Weight medium</Text>
    </>
  

    <>
      <Text display="block">block</Text>
      <Text display="inline">inline {' '}</Text>
      <Text display="inline-block">inline-block</Text>
    </>
  

    <Text variant="caps">Caps</Text>
  

    <>
      <Text color="content">content</Text>
      <Text color="content2">content2</Text>
      <Text color="content3">content3</Text>
    </>
  

    <Box borderSide="y">
      <Text align="left">Content</Text>
      <Box borderSide="y">
        <Text align="center">Content</Text>
      </Box>
      <Text align="right">Content</Text>
    </Box>
  

    <Box width="min(50ch, 100%)">
      <Text hasEllipsis>{demoText.l}</Text>
      <br />
      <Text hasEllipsis ellipsisLines={3}>{demoText.l}</Text>
    </Box>
  

    <>
      <Text tag="p">render p</Text>
      <Text tag="span">render span</Text>
    </>
  

    <Stack gap="m">
      <Box paddingBottom="l" borderSide="all" borderColor="red">
        <Text trimTop size="xxl" weight="medium" color="red">
          <span style={{background: 'hsl(0 50% 50% / 0.3)'}}>With trim</span>
        </Text>
      </Box>
      <Box paddingBottom="l" borderSide="all" borderColor="red">
        <Text size="xxl" weight="medium" color="red">
          <span style={{background: 'hsl(0 50% 50% / 0.3)'}}>Without trim</span>
        </Text>
      </Box>
    </Stack>