@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
87 lines (63 loc) • 2.4 kB
Markdown
# 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>