Paragraph

Learn about paragraph, and how to best use them in the Base System

1.0 Paragraphs

Paragraphs are the most common text element used across base system projects, and is most typically used for larger bodies of content with two sentences or more.

2.0 HTML Tag Paragraph (All Paragraphs)

Your most common paragraph styles should be applied to the global HTML tag through the 'All Paragraphs' tag. Tags let you change the default styling of text elements, like headings, paragraphs, and links. Any stylistic changes you apply to a tag or a class will affect all related elements without having to update them individually.

HTML Tag	Font Size	Line Height
All Paragraphs	16px	24px

3.0 Paragraph Classes

The Base System provides 5 default sizes for paragraph elements, and these can be updated to suit your projects. In general Paragraph Regular should match the style of the global HTML tag paragraph, providing you a style that can be applied to any element.

Class Name	Font Size	Line Height
Paragraph X Large	20px	32px
Paragraph Large	18px	32px
Paragraph Regular	16px	24px
Paragraph Small	14px	24px
Paragraph X Small	12px	16px

4.0 General Usage

4.1 Element Type

Spacing elements use a Div Block, and are wrapped around elements that require spacing. For example, if you need to space a H1 Heading and Paragraph 16px apart, you can wrap both these elements in a single Div Block with the spacer class Column Regular

4.2 Class Naming

Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Sections: Default sections use descriptive names based on the top and bottom padding.

  • Example: Column Large, Column Regular, Row Small

• Custom Sections: Use section as a suffix to the parent category

  • Example: Testmonial Column Small, Pricing Feature Row