Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

Text

Usage Guidelines

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.

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.

<Distribute direction='column' gap="small">
  <Text variant='mainTitle'>Variant mainTitle — {demoText.title}</Text>
  <Text variant='title'>Variant title — {demoText.medium}</Text>
  <Text variant='body'>Variant body — {demoText.long}</Text>
</Distribute>

<Distribute direction='column' gap="small">
  <Text variant='mainTitle'>Variant mainTitle — {demoText.title}</Text>
  <Text variant='title'>Variant title — {demoText.medium}</Text>
  <Text variant='body'>Variant body — {demoText.long}</Text>
</Distribute>

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

<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

required

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