Paragraph Block
ProA styled body text component with optimised line height, measure (line length), and spacing for comfortable reading. Provides consistent typographic rhythm across the application. Used for article content, descriptions, and any multi-sentence text blocks.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard paragraph with optimised line height and readable measure. | Use for body text in articles, descriptions, and documentation. |
| Lead | Larger, lighter paragraph for article introductions and summaries. | Use for the first paragraph of an article or section as a visual lead-in. |
Usage Guidelines
Do
Limit line length to 60–80 characters for comfortable reading.
Don't
Override the line height to be less than 1.5 — it reduces readability.
Do
Use the lead variant for article introductions to establish hierarchy.
Don't
Use paragraph blocks for headings or labels — use the correct heading elements.
Do
Maintain consistent spacing between consecutive paragraphs.
Don't
Allow paragraphs to span the full viewport width — constrain the measure.
Code
Design Tokens
Accessibility
- Use native <p> elements — they convey paragraph structure to assistive technology.
- Ensure body text meets WCAG 1.4.12 text spacing requirements.
- Maintain a minimum 4.5:1 contrast ratio between text colour and background.