@primer/react-brand/docs/components/Prose/index.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Prose
description: Use the prose component to apply Primer Brand styles to HTML markup.
keywords: ['HTML', 'text', 'formatting', 'styling']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Prose/Prose.tsx
storybook: '/brand/storybook/?path=/story/components-prose--playground'
---

```js
import {Prose} from '@primer/react-brand'
```

## Examples

> The `Prose` component renders native HTML elements with Primer Brand styling. `Prose` doesn't sanitize the input data. We recommend sanitizing the data before passing it into `Prose`.
>
> `Prose` currently supports styling the following HTML elements: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, `<blockquote>`, `<code>`, `<figure>`, `<figcaption>` and `<div>`.

### Default

```jsx
<Prose
  html={`
    <h2>Heading level 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam pretium quis. Proin ut felis ut eros tristique tincidunt.</p>
    <figure>
      <blockquote>
        <p>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</p>
        <figcaption>Lisa Vanderschuit, Engineering Program Manager, Shopify</figcaption>
      </blockquote>
    </figure>
    <p>Integer pellentesque pretium nulla viverra molestie. Praesent quis pretium sapien. Sed convallis eget lectus et pulvinar:</p>
    <ul>
      <li>
        Vivamus eu risus nec lectus consequat rutrum at vel lacus.
      </li>
      <li>Donec at dolor ut metus imperdiet congue vel porta nunc.
      </li>
      <li>Quisque eu tortor suscipit, congue quam in, bibendum tellus.</li>
    </ul>
    <h3>Heading level 3</h3>
    <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue. Ut malesuada, nisl vel dignissim mollis</p>
    <img
      src="/images/placeholder.png"
      alt="placeholder, blank area with a gray background color"
      />
    <h4>Heading level  4</h4>
    <p>
      Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities
      before they reach production. <a href="/#">Learn more here.</a>
    </p>
    <h5>Heading level 5</h5>
    <ol>
      <li>
        Vivamus eu risus nec lectus consequat rutrum at vel lacus.
      </li>
      <li>Donec at dolor ut metus imperdiet congue vel porta nunc.
      </li>
      <li>Quisque eu tortor suscipit, congue quam in, bibendum tellus.</li>
    </ol>
    <p><code>for-each-ref</code> is extremely useful for listing references, finding which references point at a given object (with <code>--points-at</code>), which references have been merged into a given branch (with <code>--merged</code>), or which references contain a given commit (with <code>--contains</code>).</p>
    <h6>Heading level 6</h6>
    <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
    <table>
      <caption>Developer growth by total developers in 2023, % increase from 2022.</caption>
      <thead>
        <tr>
          <th scope="col">Country</th>
          <th scope="col">Number of developers</th>
          <th scope="col">YoY growth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Singapore</td>
          <td>>1M developers</td>
          <td>39%</td>
        </tr>
        <tr>
          <td>India</td>
          <td>>13.2M developers</td>
          <td>36%</td>
        </tr>
        <tr>
          <td>Hong Kong SAR</td>
          <td>>1.6M developers</td>
          <td>35%</td>
        </tr>
        <tr>
          <td>Vietnam</td>
          <td>>1.5M developers</td>
          <td>34%</td>
        </tr>
        <tr>
          <td>Indonesia</td>
          <td>>2.9M developers</td>
          <td>31%</td>
        </tr>
        <tr>
          <td>Japan</td>
          <td>>2.8M developers</td>
          <td>31%</td>
        </tr>
        <tr>
          <td>Philippines</td>
          <td>>1.3M developers</td>
          <td>31%</td>
        </tr>
        <tr>
          <td>Thailand</td>
          <td>>857K developers</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>South Korea</td>
          <td>>1.9M developers</td>
          <td>22%</td>
        </tr>
        <tr>
          <td>Australia</td>
          <td>>1.4M developers</td>
          <td>21%</td>
        </tr>
      </tbody>
    </table>
    <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
    `}
/>
```

### Full Width

```jsx
<Prose
  enableFullWidth
  html={`
  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam
      pretium quis. Proin ut felis ut eros tristique tincidunt.
    </p>
    <p>
      Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam,
      sit amet auctor leo. Aliquam erat volutpat.
    </p>
    `}
/>
```

## Component props

### Prose

| Name              | Type      | Default | Required | Description                                        |
| :---------------- | :-------- | :-----: | :------- | -------------------------------------------------- |
| `html`            | `string`  |         | `true`   | Content to be displayed within the Prose component |
| `enableFullWidth` | `boolean` | `false` |          | A toggle to remove the default max-width           |
| `className`       | `string`  |         |          | Sets a custom class on the root element            |