Text

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

Features

Component for rendering default text styling within Arc XP.

Version:v2.0.0

#Import

import { Text } from '@wpmedia/ads-typography'

interface TextProps

Props	Description
`children` (optional)	`ReactNode`
`color` (optional)	`keyof ColorTokens = $text` By default, the text components are black. If you want to change the color of the text, use this prop with the appropriate color token
`css` (optional)	`NonLayoutCSS` Maps to a subset of allowed CSS attributes on the Stitches `css` prop.
`id` (optional)	`undefined \| string` The element's unique identifier. See MDN.
`isSmall` (optional)	`undefined \| false \| true = false` Use the small text variant. Overrides value from if both are set.
`truncate` (optional)	`undefined \| number` Set maximum number of lines before truncating content. If line-clamp is not supported (IE 11), fall back to textOverflow: 'ellipsis'. See https://css-tricks.com/almanac/properties/l/line-clamp/
`type` (optional)	`keyof any = default` Adjust font size for the text based on Arc type rhythm

#Usage


I am a paragraph element

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

#Overriding the element

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


ItalicUnderlineI18NCitationDeletedEmphasisInsertedCtrl + CHighlightedStrike through