Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

Text

Usage Guidelines

Usage

import { Text } from '@loomhq/lens'
<Text>Content</Text>

Sizes

Size smallSize mediumSize largeSize xlargeSize xxlargeSize xxxlarge

<>
  {availableSizes.map((size, index) => (
    <Text size={size} key={index}>
      Size {size}
    </Text>
  ))}
</>

<>
  {availableSizes.map((size, index) => (
    <Text size={size} key={index}>
      Size {size}
    </Text>
  ))}
</>

Weights

Weight bookWeight mediumWeight boldWeight black

Semantic variants

Variant mainTitle — Granularization of Incoming SignalsVariant title — Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.Variant body — The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

<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>

<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

Align left

Align right

Align center

<>
  {alignments.map((alignment, index) => (
    <Container borderSide="bottom" key={index}>
      <Text alignment={alignment}>
        Align {alignment}
      </Text>
    </Container>
  ))}
</>

<>
  {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.

Tag h1

Tag h2

Tag h3

Tag h4

Tag p

Tag span

Tag div

<>
  {availableHtmlTags.map((tag, index) => (
    <Text htmlTag={tag} key={index}>
      Tag {tag}
    </Text>
  ))}
</>

<>
  {availableHtmlTags.map((tag, index) => (
    <Text htmlTag={tag} key={index}>
      Tag {tag}
    </Text>
  ))}
</>

Text with h2 tag and title variant

Text with h4 tag and size xxlarge

<>
  <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>
</>

<>
  <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 pallete colors.

Text with colorText with colorText with color

<>
  <Text color='body'>Text with color</Text>
  <Text color='bodyDimmed'>Text with color</Text>
  <Text color='orange'>Text with color</Text>
</>

<>
  <Text color='body'>Text with color</Text>
  <Text color='bodyDimmed'>Text with color</Text>
  <Text color='orange'>Text with color</Text>
</>

Ellipsis

The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

<Text hasEllipsis>
  {demoText.long}
</Text>

<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>

<Text hasEllipsis ellipsisLines={2}>
  {demoText.long}
</Text>

Props

name

type

default

size

'medium'

fontWeight

'book' | 'medium' | 'bold' | 'black'

'book'

htmlTag

'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div'

'span'

variant

'body' | 'title' | 'mainTitle'

alignment

'left' | 'right' | 'center'

color

string

isInline

boolean

isDimmed

boolean

hasEllipsis

boolean

ellipsisLines

number

children

React.ReactNode

sizeMinMax

string[]