Paragraph

Learn about paragraphs and how to use them in the Base System

Overview

Paragraphs form the main body text of your website. The Base System provides five different paragraph sizes, ranging from Extra Small to Extra Large. Paragraphs use the Body Heading variable

Class Name	Font Size	Line Height
Paragraph X Large	20px / 1.25rem	32px
Paragraph Large	18px / 1.1125rem	32px
Paragraph Regular	16px / 1rem	24px
Paragraph Small	14px / 0.875rem	24px
Paragraph X Small	12px / 0.75rem	16px

Usage

The Paragraph element is ideal for long-form text, as it helps search engines and assistive technologies recognize the content as a paragraph. In contrast, the Text Block is better suited for short text, such as labels, captions, or names. The primary distinction between the two lies in their styling inheritance: Paragraph elements inherit styles from the "All Paragraphs" selector, while Text Blocks inherit styles from the body.

Styling

Styling Body (All Pages)

When styling the body, it is recommended to set the font color to your Primary Text Color variable and the font size to 16px. Matching the default body styles to your "Paragraph Regular" class can eliminate the need to add extra classes when using regular paragraphs.

Styling All Paragraphs

We do not recommend adding styles to the "All Paragraphs" selector, rather letting it inherit styles from the body. This way our text blocks and paragraph elements will look the same and can be used interchangeably. Styling the 'All Paragraphs' font color will also prevent paragraph elements from inheriting font color from any parent.

Text Modifiers

If you need a unique styles, text modifiers can be added as combo classes to dynamically adjust styles such as text color, font weight, and alignment. Learn more about Text Modifiers.

Styling Paragraph Classes

Your websites body text may call for different font weights, colors, line heights and letter spacing etc. As with everything in the Base System, you are encouraged to customize these classes to suit your design needs.

Typically, designs will have body text that is a lighter color than the headings. Adding a text color as a combo class to every paragraph element can quickly become a burdensome experience. We often find it easier to set a font color on paragraph classes. This means your paragraph elements wont inherit any colors but you can add text color combo classes for those situations.