A typography primitiving for displaying text and paragraphs in an interface.
This component provides all relevant typographic styles such as font-family,
line-height and font-size.
If you'd like to truncate the text after a specific number of lines, pass the
noOfLines prop. This will render an ellipsis when the text exceeds the width
of the viewport or maxWidth prop.
live
<Stack maxWidth="750">
{/* Basic */}
<Body noOfLines={1}>
"The quick brown fox jumps over the lazy dog" is an English-language
pangram—a sentence that contains all of the letters of the English alphabet.
"The quick brown fox jumps over the lazy dog" is an English-language
pangram—a sentence that contains all of the letters of the English alphabet.
Owing to its existence, Chakra was created.
</Body>
</Stack>
Semantic Element
The Body component renders a p tag by default. To override the element
that gets rendered, pass the as prop.
live
<Stack>
<Body as="b">Bold</Body>
<Body as="i">Italic</Body>
<Body as="u">Underline</Body>
<Body as="abbr">I18N</Body>
<Body as="cite">Citation</Body>
<Body as="del">Deleted</Body>
<Body as="em">Emphasis</Body>
<Body as="ins">Inserted</Body>
<Body as="kbd">Ctrl + C</Body>
<Body as="mark">Highlighted</Body>
<Body as="s">Strikethrough</Body>
<Body as="samp">Sample</Body>
<Body as="sub">sub</Body>
<Body as="sup">sup</Body>
</Stack>
Capsize
Sometimes, in order to align text properly, it's necessary to do so based on the
height of the capital letters instead of the raw line-height value. For these
cases, Body presets are available with a
Capsize adjustment so that the vertical
size of the text is aligned with its
cap height.
Pass withCapsize to enable Capsize dimensions for Heading. Toggle the
checkboxes below to see the difference in layout.
Note
The Capsize adjustment only applies when the display CSS property is set
to inline, block, or inline-block.