@ou-imdt/css/docs/native/p.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# p (paragraph)

<!-- {description} -->

## Examples

Normal paragraph
<div class="card">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quibusdam quo quam quidem impedit
    enim maiores repellat libero. Blanditiis pariatur vitae repellat sunt tempora qui laboriosam dolore
    eius error deserunt!</p>
</div>

<details class="compact">
  <summary>HTML</summary>

  ```html
  Normal paragraph
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quibusdam quo quam quidem impedit
    enim maiores repellat libero. Blanditiis pariatur vitae repellat sunt tempora qui laboriosam dolore
    eius error deserunt!</p>
  ```

</details>

Indented paragraph
<div class="card">
  <p style="--p-indent: 2rem">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut eveniet
    doloremque, quam ex ipsa mollitia error ratione, quos, ab dicta molestias! Repellendus ipsum debitis
    dolorem est, praesentium a maxime dolorum!</p>
</div>


<details class="compact">
  <summary>HTML</summary>

  ```html

  indented paragraph
  <p style="--p-indent: 2rem">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut eveniet
    doloremque, quam ex ipsa mollitia error ratione, quos, ab dicta molestias! Repellendus ipsum debitis
    dolorem est, praesentium a maxime dolorum!</p>
  ```

</details>

  paragraph is a different size
<div class="card">
  <p style="--font-size: 1.3rem; --p-align: center;">Lorem ipsum dolor sit, amet consectetur adipisicing
    elit. Aut eveniet
    doloremque, quam ex ipsa mollitia error ratione, quos, ab dicta molestias! Repellendus ipsum debitis
    dolorem est, praesentium a maxime dolorum!</p>
</div>

<details class="compact">
  <summary>HTML</summary>

  ```html

  paragraph is a different size
  <p style="--font-size: 1.3rem; --p-align: center;">Lorem ipsum dolor sit, amet consectetur adipisicing
    elit. Aut eveniet
    doloremque, quam ex ipsa mollitia error ratione, quos, ab dicta molestias! Repellendus ipsum debitis
    dolorem est, praesentium a maxime dolorum!</p>

  ```

</details>

  empty paragraphs will be set to display none to prevent screen readers announcing them.
<div class="card">
  <p></p>
  <p></p>
</div>


<details class="compact">
  <summary>HTML</summary>

  ```html
  empty paragraphs will be set to display none to prevent screen readers announcing them.
  <p></p>
  <p></p>
  ```

</details>