The Paragraph component is used to present text content in well-structured, readable blocks across the UI.
It is designed to render blocks of text with predefined typography styles, including consistent font-size, font-weight and color. It displays content as text blocks separated by line breaks and follows the visual language of the design system.
However, by default, it does not add spacing between itself and other elements — for managing layout and spacing between Paragraphs or other components, use it in combination with layout components like DxcFlex.
- Ideal for body content such as descriptions, instructions, explanations, or legal text.
- Automatically handles line height and text alignment but relies on layout components for external spacing.
- Use Paragraphs to group related sentences and divide longer content into manageable, readable chunks.
- Avoid using Paragraph as a layout or structural element — it is intended strictly for text content.
- Use Paragraph for blocks of text only: This component is designed to present readable text content. Avoid using it for non-text elements like buttons or images.
- Keep paragraphs short and scannable: Dense blocks of text can be intimidating and hard to scan. Break content into shorter sections whenever possible. Break content into smaller paragraphs to make it easier for users to read and for screen readers to navigate.
- Don't nest paragraphs inside each other: Paragraph tags (<p>) cannot be nested in valid HTML. Instead, use separate Paragraph components for each block of text.
- Use layout components for spacing: Paragraph does not include spacing between itself and surrounding elements. Use layout wrappers like DxcFlex to manage spacing between components.
- Support accessibility: Clear separation of paragraphs and appropriate structure improves screen reader support and makes content easier to digest for all users.
- Ensure visual and semantic clarity: Paragraphs should support the overall information hierarchy. Use headings for titles and Paragraphs for descriptive or supporting text.