Usage
import { Text } from '@loomhq/lens'
<Text>Content</Text>
Sizes
<>
{availableSizes.map((size, index) => (
<Text size={size} key={index}>
Size {size}
</Text>
))}
</>
Weights
Semantic variants
<Arrange gap="small" columns="1fr">
<Text variant='mainTitle'>Variant mainTitle — {demoText.title}</Text>
<Text variant='title'>Variant title — {demoText.medium}</Text>
<Text variant='body'>Variant body — {demoText.long}</Text>
</Arrange>
Alignment
<>
{alignments.map((alignment, index) => (
<Container borderSide="bottom" key={index}>
<Text alignment={alignment}>
Align {alignment}
</Text>
</Container>
))}
</>
HTML tag
Change the HTML tag with htmlTag prop.
<>
{availableHtmlTags.map((tag, index) => (
<Text htmlTag={tag} key={index}>
Tag {tag}
</Text>
))}
</>
<>
<Text htmlTag='h2' variant='title'>
Text with h2 tag and title variant
</Text>
<Text htmlTag='h4' size='xxlarge'>
Text with h4 tag and size xxlarge
</Text>
</>
Color
Use one of the palette colors.
<>
<Text color='body'>Text with color</Text>
<Text color='bodyDimmed'>Text with color</Text>
<Text color='orange'>Text with color</Text>
</>
Ellipsis
<Text hasEllipsis>
{demoText.long}
</Text>
Ellipsis lines
Use hasEllipsis and ellipsisLines to display multiple lines of text with ellipsis.
<Text hasEllipsis ellipsisLines={2}>
{demoText.long}
</Text>
Props
size
'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
'medium'
fontWeight
'book' | 'medium' | 'bold' | 'black'
'book'
htmlTag
'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div'
'span'
variant
'body' | 'title' | 'mainTitle'
alignment
'left' | 'right' | 'center'