Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · prose

Document content

A readable native document flow for guides, policies and long-form informational pages.

Install with npx @madojs/ui@latest add prose.

Block

Document content

Community project handbook

A durable guide starts with native document structure and copy that stays readable without client-side behavior.

Working principles

Keep the source close to the people who maintain it and explain decisions in language that survives implementation changes.

  • Prefer stable browser semantics.
  • State ownership and review expectations explicitly.
  • Keep recovery paths visible and understandable.

Review policy

Revisit the document when its surrounding product contract changes, not merely when its visual treatment changes.

Documentation is part of the interface people depend on.
The application owns dates, authorship and any document metadata.

Composition

  • Choose the native article, main or section container that fits the document, then group authored headings and flow content in explicit mado-ui-prose-section wrappers.
  • Use mado-ui-prose-note for optional supporting metadata; other Mado blocks can remain direct root children without inheriting document typography.

Public API

class mado-ui-prose
Width-constrained readable document flow.
class mado-ui-prose-section
Opt-in heading, paragraph, list and blockquote rhythm.
class mado-ui-prose-note
Optional separated supporting note or document metadata.

Detected public classes

  • .mado-ui-prose
  • .mado-ui-prose-note
  • .mado-ui-prose-section

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-prose-color
  • --mado-ui-prose-gap
  • --mado-ui-prose-heading-color
  • --mado-ui-prose-line-height
  • --mado-ui-prose-list-gap
  • --mado-ui-prose-max-inline-size
  • --mado-ui-prose-muted-color
  • --mado-ui-prose-note-border
  • --mado-ui-prose-note-font-size
  • --mado-ui-prose-quote-border
  • --mado-ui-prose-quote-padding-inline
  • --mado-ui-prose-section-gap
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-space-6

Accessibility contract

  • The application chooses the document landmark, one useful accessible heading relationship and heading levels that follow the surrounding outline.
  • Lists and quotations keep native elements; the note class adds no contentinfo role, live region or authoring metadata.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the stylesheet, the article, sections, headings, paragraphs, lists and quotation remain readable in source order.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.