Prose

import {Heading, Prose, Text} from '@sentry/scraps/text';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/text/prose');

The <Prose> component provides consistent vertical spacing and typography for rich text content. It automatically applies proper spacing between prose elements like headings, paragraphs, lists, tables, and blockquotes.

<Prose>
  <Heading as="h1">Article Title</Heading>
  <Text>This is a paragraph of text with proper spacing.</Text>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
</Prose>

Basic Usage

Use <Prose> to wrap any content that contains multiple prose elements to ensure consistent spacing.

<Storybook.Demo> <Prose> <Heading as="h2">Getting Started</Heading> <Text> This is a paragraph of text that demonstrates how the Prose component automatically applies consistent spacing between prose elements. </Text> <Text> Multiple paragraphs maintain proper spacing, making content easy to read and visually appealing. </Text> <Heading as="h3">Features</Heading> <ul> <li>Automatic spacing between elements</li> <li>Support for all prose elements</li> <li>Consistent typography</li> <li>Use plain html and get nice styles</li> </ul> </Prose> </Storybook.Demo>

<Prose>
  <Heading as="h2">Getting Started</Heading>
  <Text>
    This is a paragraph of text that demonstrates how the Prose component automatically
    applies consistent spacing between prose elements.
  </Text>
  <Text>
    Multiple paragraphs maintain proper spacing, making content easy to read and visually
    appealing.
  </Text>
  <Heading as="h3">Features</Heading>
  <ul>
    <li>Automatic spacing between elements</li>
    <li>Support for all prose elements</li>
    <li>Consistent typography</li>
    <li>
      Use plain <code>html</code> and get nice styles
    </li>
  </ul>
</Prose>