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="l2">
      <Box borderSide="y" borderColor="red5" borderWidth="2px" width="fit-content" paddingX="s">
        <Text size="xxl" weight="" trimTop>
          Ag
        </Text>
      </Box>
      <Box borderSide="y" borderColor="red5" borderWidth="2px" width="fit-content" paddingX="s">
        <Text size="xxl" weight="" trimTop trimBottom>
          Ag
        </Text>
      </Box>
      <Box borderSide="y" borderColor="red5" borderWidth="2px" width="fit-content" paddingX="s">
        <Text size="xxl" weight="" trimBottom>
          Ag
        </Text>
      </Box>
    </Stack>