Text

Text is the used to render text and paragraphs with consistent styling. It renders a <p> tag by default.

Import

import { Text } from '@wpmedia/arc-ui-typography'

Usage

Text composes the Box component, so you can pass all Box props.

I am a paragraph element

<Text color="text.blue" bg="blue.100" textAlign="center"> I am a paragraph element </Text>

<Text color="text.blue" bg="blue.100" textAlign="center">
  I am a paragraph element
</Text>

Copy

Truncate text

The truncate prop takes the number of lines to truncate. If the browser supports line clamp then that property is used, otherwise it will fallback to using the text-overflow method.

It is surprisingly not straight forward to truncate text in HTML/CSS. The truncate prop makes it much easier to do without having to look up the required CSS properties. If in a browser that supports, it will use line clamp.

<Text truncate={1}> It is surprisingly not straight forward to truncate text in HTML/CSS. The truncate prop makes it much easier to do without having to look up the required CSS properties. If in a browser that supports, it will use line clamp. </Text>

<Text truncate={1}>
  It is surprisingly not straight forward to truncate text in HTML/CSS. The
  truncate prop makes it much easier to do without having to look up the
  required CSS properties. If in a browser that supports, it will use line
  clamp.
</Text>

Copy

Overriding the element

To see the element being rendered, use the DevTools to see inpsect the element.

Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough

<> <Text as="i">Italic</Text> <br /> <Text as="u">Underline</Text> <br /> <Text as="abbr">I18N</Text> <br /> <Text as="cite">Citation</Text> <br /> <Text as="del">Deleted</Text> <br /> <Text as="em">Emphasis</Text> <br /> <Text as="ins">Inserted</Text> <br /> <Text as="kbd">Ctrl + C</Text> <br /> <Text as="mark">Highlighted</Text> <br /> <Text as="s">Strikethrough</Text> </>

<>
  <Text as="i">Italic</Text>
  <br />
  <Text as="u">Underline</Text>
  <br />
  <Text as="abbr">I18N</Text>
  <br />
  <Text as="cite">Citation</Text>
  <br />
  <Text as="del">Deleted</Text>
  <br />
  <Text as="em">Emphasis</Text>
  <br />
  <Text as="ins">Inserted</Text>
  <br />
  <Text as="kbd">Ctrl + C</Text>
  <br />
  <Text as="mark">Highlighted</Text>
  <br />
  <Text as="s">Strikethrough</Text>
</>

Copy