Prose

A container for long-form content, such as documentation, articles, and release notes. It switches the text inside to the prose style and spaces the blocks inside, so they need no margins of their own. For application UI, use Stack and the components’ own spacing.

acme deploy --prod

import {
  Blockquote,
  CodeSnippet,
  Heading,
  InlineCode,
  Link,
  List,
  Prose,
  Strong,
  Text,
} from '@earendil-works/elanor-react';

export default function ProseDemo() {
  return (
    <Prose>
      <Heading level={2} size={2}>
        Deploy a project
      </Heading>
      <Text>
        Every project deploys from its default branch. Connect a repository first, then choose the
        branch in <Link href="#">project settings</Link>.
      </Text>
      <List.Root render={<ol />}>
        <List.Item>Install the command-line tool.</List.Item>
        <List.Item>
          Sign in with <InlineCode>acme login</InlineCode>.
        </List.Item>
        <List.Item>Run the deploy command from the project folder.</List.Item>
      </List.Root>
      <CodeSnippet>acme deploy --prod</CodeSnippet>
      <Heading level={3} size={3}>
        Rollbacks
      </Heading>
      <Text>
        A deploy that fails its checks <Strong>never replaces</Strong> the running version.
      </Text>
      <Blockquote>
        <Text>We roll back by deploying the previous commit again; nothing else changes.</Text>
      </Blockquote>
      <Text>Deploys keep their logs for 30 days.</Text>
    </Prose>
  );
}

import {Heading, Prose, Text} from '@earendil-works/elanor-react';

<Prose>
  <Heading level={2} size={2} />
  <Text />
</Prose>;

Prose renders a div with data-text-context="prose", so semantic.typography.primary resolves to the prose style for Text, Link, List, and Table inside. Use render for another element, such as article. Inside, an element with data-text-context="ui" switches back to the UI style and keeps Prose’s spacing out of its lists and quotations, such as an interface example in an article.

Prose puts space above each block, from the semantic.dimension.space.flow tokens, also between the blocks inside list items and quotations:

A heading stays closest to the content it introduces. Headings match directly or as the only heading inside a wrapper, such as a heading with a link button. Inline content in list items and quotations gets no space.

The spacing lives in the elanor.prose cascade layer, after the components, so it overrides their margin resets.

Renders <div>. Accepts its HTML attributes, ref, and render.