Paragraphs

Text container used for any text element such as paragraphs, headings, and lists. Establishes vertical spacing and optimizes the reading experience

Default

Used as default font style for all text information. Also known as body-default in UI ToolKit.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Body

Used for editorial content such as long-form articles like Expert Advice pages or editorial content on PDP pages. Also known as body-editorial in UI ToolKit.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Text container does not exceed 634px or line length does not exceed more than 75 characters
  • Minimize use of reversed-out body copy because it’s harder to read
  • When possible, use the first sentence as an introduction to the paragraph. With screen readers, users can listen to the first sentence and then jump to the next paragraph
  • Break long pages into shorter sections by organizing content into well-defined groups or chunks

This component has compliance with following WebAIM’s accessibility guidelines:

  • WCAG SC 1.4.8: Visual presentation: Cedar Design System text component provides for spacing for:
    • Within paragraphs, line spacing is at least 1.5 times font height
    • Between paragraphs, at least 1.5 times larger than the line spacing
paragraphs_spacing_graphic_example