layout-text

Typographic content container with vertical rhythm. Provides intelligent spacing between paragraphs, headings, lists, and other block elements.

Attributes

Attribute Values Default Description
layout-text has no configurable attributes. It applies consistent typographic spacing automatically.

How It Works

The layout-text element creates a container optimized for long-form reading content. It:

  • Sets a maximum line width of 65ch (characters) for optimal readability
  • Applies consistent vertical spacing between block elements
  • Uses larger margins before major headings (proximity principle)
  • Tightens spacing after headings so they associate with their content
  • Provides extra breathing room around figures and code blocks

Live Example

Spacing Rules

The prose element applies different spacing based on element types:

Context Spacing Rationale
Default (between elements) var(--size-m) Standard paragraph spacing
Before h2 var(--size-2xl) Major section break
Before h3 var(--size-xl) Subsection break
Before h4/h5/h6 var(--size-l) Minor section break
After any heading var(--size-s) Associates heading with content
Between consecutive lists var(--size-s) Groups related lists
Before/after figures and pre var(--size-l) Extra breathing room for media

Usage Examples

Blog Post

Documentation Page

With layout-center for Page Layout

Best Practices

  • Use for long-form content only - layout-text is designed for articles, documentation, and similar content. Don't use it for UI layouts.
  • Combine with layout-center - For page layouts, wrap layout-text in a layout-center to constrain width.
  • Semantic HTML - The spacing rules work best with proper semantic markup (h2 before h3, etc.).
  • Avoid nesting layout elements - layout-stack, layout-grid, and similar elements inside prose may have unexpected spacing.

Related
↑