Skip to main content

Paragraph

The paragraph component provides proper top margin spacing for paragraph text. It is useful for larger blocks of text used for detail and explanations but can also provide concise summaries for elements on the page.

Example

Size 1

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

Size 2

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

Size 3

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

Size 4

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

Size 4 (lean)

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

Paragraph sizes on a default theme

Best practices

The paragraph component is an MWF enhancement for the HTML <p> element. It is useful for larger blocks of content and exposition. Use the paragraph component to delineate all paragraphs of text on your webpage. Paragraph is responsive.

Depending on their size, paragraphs can potentially degrade the user’s ability to identify useful details and explanations within the sea of text. Be mindful of when and where paragraphs appear as well as their overall size. In certain types of page layouts, paragraph is entirely appropriate and may constitute the majority of the page. Whereas, in other layouts (such as one optimized for quick browsing and listings), large paragraphs can impede the usability of the page’s content. The best rule of thumb is to only allow the paragraph to be as big as it needs to be, and then cut it down by 25-50%. Keep it short and simple.

Paragraph sizing in MWF is intended to coordinate with headings and subheadings according to the standard type ramp. Use the same numerical level for the paragraph as its associated heading or subheading.

Do

  • In general, use one c-paragraph-1 through c-paragraph-4 classes for the majority of paragraph text on the page.
  • Use set sizing (i.e. type ramp) when paragraphs are paired with headings and/or subheadings. For example, c-paragraph-2 would pair with similar sized c-heading-2 and c-subheading-2. This set sizing applies for sizes 1-4.
  • Wrap all regular body text in <p>...</p> element tags.
  • In modules, target the use of the non-numerical c-paragraph class when you do not need sizes and padding to maintain a small footprint while still targeting the paragraph.
  • Use the non-numerical c-paragraph class when in an environment where the size is inherited from the parent element.

Don’t

  • Do not use a paragraph for meta data, use a meta element instead.
  • Do not use too many different c-paragraph-* classes on the same page unless the context of the page requires it (such as a documentation page, as opposed to an e-commerce page). Otherwise, this can overwhelm the reader and takes away from establishing a useful information hierarchy within the structure of the page.
  • Do not wrap a block-styled hyperlink in <p> tags.

Also known as

Details
Text block

Related

Caption
Heading
Hyperlink
Subheading

Accessibility

Semantically meaningful content is especially important for accessibility. Use a paragraph component for all content that should be interpreted as paragraph text. While you could achieve similar styling using a div or many other elements, it's the semantics that might get lost and thus negatively impact accessibility and search engine optimization.

Options

  • Size 1: The largest size option; use the c-paragraph-1 class.
  • Size 2: Use the c-paragraph-2 class.
  • Size 3: Use the c-paragraph-3 class. This is the default for the c-paragraph.
  • Size 4: Can be styled by class name c-paragraph-4 and is the smallest size, yet it shares the same size as default.
  • Inherit size: Use the non-numerical c-paragraph class when the size should be inherited from the parent.
  • f-lean: Apply the f-lean class to any of the above sizes 1-4 to override all vertical padding to 0px.

Development

  • Schema definition: The paragraph schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Paragraph 1

Paragraph

<p class="c-paragraph-1">Paragraph</p>

Paragraph 2

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<p class="c-paragraph-2">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>

Paragraph 3

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<p class="c-paragraph-3">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>

Paragraph 4

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<p class="c-paragraph-4">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>

Paragraph 3 with lean option

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<p class="c-paragraph-3 f-lean">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>