UI components · Text
Paragraph
Also called: Body text, Body copy, Text block, Prose
A complete block of explanatory text, written with a p tag and placed under a heading to spell out the details. Whether it's easy to read comes down to line length, line height, and font size.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstMake the body text easier to read. Use p tags for paragraphs, 16px font, line height 1.75, dark gray #374151 (not light gray), and 16px between paragraphs. Cap the text container at 680px wide, about 65 characters per line, so it doesn't fill the screen on wide monitors. Keep each paragraph to 3–5 lines. If it runs longer, split it in two, or turn parallel points into a list. Underline links inside paragraphs and use bold for emphasis, so nothing relies on color alone.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Paragraph is what you need.
Use Paragraph when
- Articles, help docs, and product descriptions that users read straight through
- When a heading needs a paragraph or two below it to explain background, rules, or caveats
- Empty states and result pages that need to tell users what happened and what to do next
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A line of text that stretches across a whole wide screen, so it's hard to find the start of the next line
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A wall of text with no paragraph breaks, no spacing between paragraphs, and tight line height
- 03
Body text in very light, small gray type without enough contrast, so it's tiring to read
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
One or more p tags, each a few lines of complete sentences, with clear space between paragraphs. Can include inline links and bold emphasis.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Paragraphs are the blocks of running text on a page: article body, feature descriptions, product descriptions, instructions above a form. They carry the details a heading can't fit, and readers go through them line by line, so readability matters more than looks. Body text is usually 16px (14–16px), with a line height of 1.6–1.8 and about 60–75 characters per line (30–40 for Chinese). The space between paragraphs should be bigger than the space between lines.
How it differs from a Heading: a heading is short, bold, and big, made for scanning. A paragraph is full sentences, made for reading. It's also different from helper text in a form or a one-line summary in a card. Those are one or two lines of supporting text, lighter and smaller. A paragraph is the main content, so its color has to be dark enough.
Use a p tag, keep each paragraph to one idea, and aim for 3–5 lines. Don't make gray text so light it's hard to see. It needs at least 4.5:1 contrast with the background. On wide screens, cap the body text width (for example 680px) so a single line never stretches across the whole screen.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-paragraph- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
article p.prose p.markdown-body pp[class*="leading-"].leaddiv.ant-typographyp.ant-typographydiv.arco-typography[class*="MuiTypography-body1"][class*="MuiTypography-paragraph"].n-p
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
paragraphdescdescriptionintrointro-textbody-textbody-copytext-body
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
ParagraphBodyTextDescription
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<p>
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026