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

prop

type

default

size

oneOf: 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge'

'medium'

fontWeight

oneOf: 'book', 'medium', 'bold', 'black'

'book'

htmlTag

oneOf: 'h1', 'h2', 'h3', 'h4', 'p', 'span', 'div'

'span'

variant

oneOf: 'body', 'title', 'mainTitle'

alignment

oneOf: 'left', 'right', 'center'

color

string

isInline

bool

isDimmed

bool

hasEllipsis

bool

ellipsisLines

number

children

node