Menu Icon

Paragraph

A paragraph represents text content. They let users read context.

Usage

Clarity comes with four different types of paragraphs to use. They provide to give visual distinction between the priority or hierarchy of the paragraphs in the application.

Guidance

  • Paragraphs should indicate a text field.
  • They should be easy to read.
  • Configure ellipsis of Paragraphs to set the maximum height of text area.

When to use

  • Use Paragraphs for long text contents.

Additional info

  • Consider using multiple Paragraphs to provide indent.

Variations

  • There are several types of Paragraphs with varying degrees of emphasis. Emphasis determines a Paragraph’s appearance and weight.
  • The updatable properties of Paragraphs are content and type.
  • The updatable behaviour of Paragraphs is ellipsis.
  • The updatable style features of Paragraphs are margin, padding, size, overflow, typography, background, border and css.
  • The usable dynamic properties of Paragraphs are _label, type, ellipsis, hidden and style.

Hints

  • Consider using Spaces or Dividers between Paragraphs to avoid vertical clinging.
  • Consider using Paragraphs inside Columns or Divs to avoid horizontal clinging.