Text container

A text container is used to wrap text elements such as paragraphs, headings, and lists to give them vertical spacing.

Examples

Use this component for default vertical spacing.

Drag to resize example

Props

children
React.ReactNode
The content to render in the text container.
spacing
"tight" | "loose"
The amount of vertical spacing children will get between them

Default text container

Use this component for default vertical spacing.

Default text container

Tight text container

Use the tight spacing option to relate content topics to each other.

Tight text container

Loose text container

Use the loose spacing option to separate concepts that are independent of each other.

Loose text container

Default text container

Use this component for default vertical spacing.

Default text container

Tight text container

Use the tight spacing option to relate content topics to each other.

Tight text container

Loose text container

Use the loose spacing option to separate concepts that are independent of each other.

Loose text container

Best practices

The closer the spacing, the closer the relationship between content topics. The closeness visually represents the relationship.

  • Use tight spacing to relate content topics to each other
  • Use loose spacing to separate concepts that are independent of each other