<> <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>
See all colors
<> <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> </>
trimTop
trims the extra top spacing generated by the line-height. This is useful for modal and card titles, to optically even out card top and side paddings.
Use it only for titles in sizes xl
and xxl
.
<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>