Text

Used to render text and paragraphs.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?

import { Text } from '@fidely-ui/react/text'

export const TextBasic = () => {
  return (
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?
    </Text>
  )
}

Usage

import { Text } from '@fidely-ui/react'

<Text>hello from Fidely text component</Text>

Examples

Size

Use the size prop to adjust the visual size of the text or use the textStyle prop

Heading 1 with (sm)

Heading with (md)

Heading with (lg)

Heading with (xl)

Heading with (2xl)

Heading with (3xl)

Heading with (4xl)

Heading with (5xl)

Heading with (6xl)

Heading with (7xl)

import { Text } from '@fidely-ui/react/text'

export const TextSize = () => {
  return (
    <>
      <Text size={'sm'}>Heading 1 with (sm)</Text>
      <Text size={'md'}>Heading with (md)</Text>
      <Text size={'lg'}>Heading with (lg)</Text>
      <Text size={'xl'}>Heading with (xl)</Text>
      <Text size={'2xl'}>Heading with (2xl)</Text>
      <Text size={'3xl'}>Heading with (3xl)</Text>
      <Text size={'4xl'}>Heading with (4xl)</Text>
      <Text size={'5xl'}>Heading with (5xl)</Text>
      <Text size={'6xl'}>Heading with (6xl)</Text>
      <Text size={'7xl'}>Heading with (7xl)</Text>
    </>
  )
}

Truncate

Use the truncate prop to truncate the text after a single line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?

import { Box, Text } from '@fidely-ui/react'

export const TextTruncate = () => {
  return (
    <Box width={'250px'}>
      <Text truncate>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?
      </Text>
    </Box>
  )
}

Line Clamp

Use the lineClamp prop to truncate the text after a certain number of lines.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi quas praesentium dicta similique! Recusandae pariatur rem suscipit porro voluptates odio tempore magni incidunt. Maxime quam commodi illo dolorum ex saepe harum sapiente nam fugit accusantium, nesciunt praesentium assumenda! Iusto?

import { Box, Text } from '@fidely-ui/react'

export const TextLineClamp = () => {
  return (
    <Box width={'250px'}>
      <Text lineClamp={3}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi
        quas praesentium dicta similique! Recusandae pariatur rem suscipit porro
        voluptates odio tempore magni incidunt. Maxime quam commodi illo dolorum
        ex saepe harum sapiente nam fugit accusantium, nesciunt praesentium
        assumenda! Iusto?
      </Text>
    </Box>
  )
}

Font weight

Use the fontWeight prop to change the weight of the text.

Lorem ipsum dolor sit amet consectetur adipisicing.

import { Text } from '@fidely-ui/react/text'

export const TextWeight = () => {
  return (
    <>
      <Text fontWeight="light">
        Lorem ipsum dolor sit amet consectetur adipisicing.
      </Text>
      <Text fontWeight="normal">
        Lorem ipsum dolor sit amet consectetur adipisicing.
      </Text>
      <Text fontWeight="medium">
        Lorem ipsum dolor sit amet consectetur adipisicing.
      </Text>
      <Text fontWeight="semibold">
        Lorem ipsum dolor sit amet consectetur adipisicing.
      </Text>
      <Text fontWeight="bold">
        Lorem ipsum dolor sit amet consectetur adipisicing.
      </Text>
    </>
  )
}