Paragraph, meant to represent the paragraph element, is a typography component built on top of Text.
Anatomy
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Text container | Block-level element that renders paragraph text with a predefined typography style. |
Guidelines
When to use
Paragraph is the default choice for body text. Use it when writing a block of content like a description, explanation, instructions or confirmation. Prefer it over Text when element semantics are important and a <p> should be used.
Paragraph vs. Text
The Paragraph is built upon the foundational Text component to render text in various typographic styles. When writing copy, keep the difference between the two in mind. One may be substituted for the other, however, there's a distinct semantic difference that's important for maintaining structure and meaning within the page document.
- Paragraph uses a paragraph element (
<p>) and should be used for regular body copy, subtitles, and supporting content. - Text is the low-level base component without semantic meaning. Use it when neither the Paragraph nor any other semantic typographical Pluma component makes sense for the use case.
Best practices
Heading pairing
A Heading with a Paragraph subtitle is a common pattern within the product. The Paragraph serves to supplement the Heading with supporting, contextual information to allow the Heading to remain poignant.
Workspace health
Monitor the overall health and performance of your workspace.
Monitor the overall health and performance of your workspace
Hierarchy
When multiple Paragraphs appear together with differing levels of importance, use size and color variants to establish visual hierarchy. The secondary variant and extra-small size are effective for supporting or supplementary information.
What would work better for you?
Select all that apply
What would work better for you?
Select all that apply
Appearance
Variants
What type of data will you sync?
The active variant uses semibold weight and active color to draw attention to key content like questions or primary instructions.
Service Organization Controls (SOC 2 Type II)
For extra-small, active applies semibold weight without changing the text color.
Inactivity is based on when a segment was last updated, not its membership.
The secondary variant uses a subtle text color for supplementary information that supports surrounding content without competing for attention.
Last edited 2 hours ago
For extra-small, secondary uses a subtle color for de-emphasized helper text.
Content
In most cases, content writing using the Paragraph component should follow the guidelines within the Pluma Foundations Content section. For more specific component cases, refer to those individual components' content sections within their design guidelines page.