Paragraph
Rich text block element with full typography controls for body content, supporting inline formatting and multiple variants.
Live Preview
This is a paragraph element with default styling. Paragraphs support rich text formatting including bold, italic, and links.
This is a lead paragraph with larger text, typically used for introductions and hero sections.
This is a smaller paragraph for captions, footnotes, or secondary information that doesn't need as much visual prominence.
Code
1<p class="paragraph">2 This is a paragraph element with default styling.3 Paragraphs support rich text formatting including4 <strong>bold</strong>, <em>italic</em>, and5 <a href="#">links</a>.6</p>78<p class="paragraph paragraph--lead">9 This is a lead paragraph with larger text,10 typically used for introductions.11</p>1213<p class="paragraph paragraph--small">14 This is a smaller paragraph for captions15 or secondary information.16</p>
Brand Properties
Properties available in the CRAFT editor for the Paragraph element, with mappings to brand design tokens.
| Property | Type | Brand Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Font | Dropdown | Open Sans | Open Sans | Open Sans |
| Weight | Dropdown | normal (400) | normal (400) | normal (400) |
| Size | Dropdown | 14px | 20px (Body) | 20px (Body) |
| Text Alignment | 4 options | left | left | left |
| Line Height | Slider | Auto | 1.5 (normal) | 1.5 (normal) |
| Letter Spacing | Slider | 0 px | 0 px | 0 px |
| Text Case | 2 options | none | none | none |
| Margins | Input (px) | 0 | 0 | 0 |
| Padding | Input (px) | 0 | 0 | 0 |
| Corner Radius | Input (px) | 0 | 0 | 0 |
| Background Color | Color picker | rgb(255,255,255) | rgb(255,255,255) | rgb(255,255,255) |
| Border Style | Dropdown | none | none | none |
| Border Width | Input | 0px | 0px | 0px |
| Border Color | Color picker | rgb(0,0,0) | rgb(0,0,0) | rgb(0,0,0) |
| Opacity | Slider | 100% | 100% | 100% |
| Shadow | Toggle | Off | Off | Off |
Font Options
Available font families in CRAFT:
- Open Sans
- Larken
- Lato
- Inter
- Roboto
Weight Options
Available font weights in CRAFT:
- light (300)
- normal (400)
- medium (500)
- semibold (600)
- bold (700)
Variants
Text Sizes
Lead paragraphs draw attention to key introductory content.
Standard body text for main content areas.
Smaller text for secondary information.
Caption text for image descriptions and footnotes.
Text Alignment
Left aligned text (default) - best for body content in LTR languages.
Center aligned text - often used for short statements or quotes.
Right aligned text - used sparingly for specific layouts.
Justified text spreads content evenly across the line width. This can improve the visual appearance of dense text blocks but may create uneven word spacing.
Rich Text Formatting
Paragraphs support inline formatting for emphasizing content:
Text with bold emphasis for important information.
Text with italic emphasis for titles or foreign words.
Text with underlined text (use sparingly, can be confused with links).
Text with strikethrough for deleted or outdated content.
Text with inline code for technical terms.
Text with hyperlinks for navigation.
Text with superscript for footnotes1 and subscript for chemical formulas H2O.
Accessibility
- Use semantic
<p>tags for paragraph content - Maintain adequate contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Keep line length between 50-75 characters for optimal readability
- Use appropriate line height (1.5 minimum) for body text
- Don't rely solely on color or formatting to convey meaning
- Ensure links are distinguishable from surrounding text
Do's and Don'ts
Do
- Keep paragraphs focused on a single idea
- Use lead paragraphs for page introductions
- Maintain consistent font sizes across similar content
- Use adequate line height for readability
- Break up long content into multiple paragraphs
Don't
- Create walls of unbroken text
- Use justified text on narrow columns
- Mix too many font sizes in one section
- Underline text that isn't a link
- Use line heights below 1.4 for body text
Unmapped Brand Values
The following brand design tokens are not directly mapped to CRAFT Paragraph properties but may be relevant for implementation:
HoB
| Token | Value | Notes |
|---|---|---|
| Text Primary | #038012 | Primary text color (brand green) - no text color property in CRAFT |
| Text Secondary | #666666 | Secondary text color - no text color property in CRAFT |
| Text Muted | #999999 | Muted text color - no text color property in CRAFT |
| Small Font Size | 14px | Available as size option in CRAFT |
| Caption Font Size | 12px | May need custom size option in CRAFT |
| Line Height Tight | 1.2 | Available via Line Height slider |
| Line Height Relaxed | 1.75 | Available via Line Height slider |
TAE
| Token | Value | Notes |
|---|---|---|
| Text Primary | #101010 | Primary text color (near black) - no text color property in CRAFT |
| Text Secondary | #4A4A4A | Secondary text color - no text color property in CRAFT |
| Text Muted | #8A8A8A | Muted text color - no text color property in CRAFT |
| Small Font Size | 14px | Available as size option in CRAFT |
| Caption Font Size | 12px | May need custom size option in CRAFT |
| Line Height Tight | 1.2 | Available via Line Height slider |
| Line Height Relaxed | 1.75 | Available via Line Height slider |
Note: Missing CRAFT Property
The CRAFT Paragraph element does not include a Text Color property. Both HoB and TAE brands define specific text colors (Primary, Secondary, Muted) that cannot be directly configured through the current CRAFT property panel. Consider adding a Text Color property to support brand-specific typography colors.