Container for rich text content from CMS or markdown sources. Applies consistent typography and spacing to arbitrary...

Container for rich text content from CMS or markdown sources. Applies consistent typography and spacing to arbitrary HTML content including headings, paragraphs, lists, blockquotes, and links. Use this when rendering user-generated or CMS-sourced content that needs semantic styling without requiring individual component composition. By default, text-passage sets a max line-length for reading comfort. For full-width layouts, omit the `capLinelength` property. ### Common usage - Blog post or article body - CMS-rendered rich text - User-submitted content - Marketing copy or product descriptions

<ed-text-passage></ed-text-passage>

Properties

Name Type Default Description
inverted Boolean boolean Container for rich text content from CMS or markdown sources. Applies consistent typography and spacing to arbitrary HTML content including headings, paragraphs, lists, blockquotes, and links. Use this when rendering user-generated or CMS-sourced content that needs semantic styling without requiring individual component composition. By default, text-passage sets a max line-length for reading comfort. For full-width layouts, omit the `capLinelength` property. ### Common usage - Blog post or article body - CMS-rendered rich text - User-submitted content - Marketing copy or product descriptions / export class EdTextPassage extends EdElement { static get styles() { return unsafeCSS(styles); } /** Inverted color variant for dark backgrounds. Adjusts text color for proper contrast on dark surfaces.
size String 'xs' | 'sm' = undefined Size variant for reducing overall typography scale. - `sm`: Smaller typography than default - `xs`: Even smaller typography (use sparingly) If not set, uses default body size.
capLinelength Boolean boolean Constrain maximum line length to an optimal reading width. When enabled, wraps content in an `ed-linelength-container` to prevent uncomfortable long lines. Disable for full-width layouts or when width is pre-constrained.

Slots

Name Description
- The text passage content (HTML elements like p, h2, ul, blockquote, etc.)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/text-passage/text-passage.ts