# text.prose

Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

Component: [`<Text>`](https://www.prongs.dev/docs/components/text.md) · Renders: `<div>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md) · Comes from: [Editorial pack](https://www.prongs.dev/docs/intents/packs/editorial.md)

## Example

```tsx
<Text intent="text.prose" dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links | `text.prose` (this page) |
| A sentence or paragraph you write in the page | [`text.body`](https://www.prongs.dev/docs/intents/text/body.md) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`typography.body`](https://www.prongs.dev/docs/intents/ui.md#typography-body), [`tone.default`](https://www.prongs.dev/docs/intents/ui.md#tone-default)

## For registry authors

**Pack intent.** `prongs add editorial` puts the editorial pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How text.prose resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`typography.body`](https://www.prongs.dev/docs/intents/ui.md#typography-body) — Reading type

  ```
  text-base leading-7
  ```

- [`tone.default`](https://www.prongs.dev/docs/intents/ui.md#tone-default) — Main text colour

  ```
  text-foreground
  ```

- `text.prose` (this page) — Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

  ```
  [&_:is(h2,h3)]:font-semibold [&_:is(p,ul,ol)]:my-4
  [&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal
  [&_ol]:pl-6
  ```

Final classes

```
text-base leading-7 text-foreground [&_:is(h2,h3)]:font-semibold
[&_:is(p,ul,ol)]:my-4 [&_a]:underline [&_ul]:list-disc
[&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6
```

Definition

```ts
'text.prose': {
  kind: 'semantic',
  description: 'Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links',
  refs: ['typography.body', 'tone.default'],
  binding: {
    element: 'div',
    classes: '[&_:is(h2,h3)]:font-semibold [&_:is(p,ul,ol)]:my-4 [&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6',
  },
  notFor: [
    {
      context: 'a sentence or paragraph you write in the page',
      instead: 'text.body',
    },
  ],
},
```