fannypack/src/Paragraph/Paragraph.mdx

An accessible, composable, and friendly React UI Kit

---
name: Paragraph
route: /typography/paragraph
menu: Typography
---

import { Playground, PropsTable } from 'docz';
import { Box } from '../primitives/index';
import Paragraph from './index';

# Paragraph

## Import

`import { Paragraph } from 'fannypack'`

## Basic Usage

`<Paragraph>` renders a `<p>` element with reset styles and a bottom margin.

<Playground>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus justo, blandit ut leo in, molestie pretium mauris. Pellentesque eros elit, interdum eget mauris et, ultrices auctor nisl. Praesent a dolor vel nulla vehicula lacinia. Proin iaculis ligula nulla.
  </Paragraph>
  <Paragraph>
    Morbi tincidunt cursus leo, sit amet porttitor mi. In a diam volutpat, blandit felis eu, viverra nunc. Nullam molestie iaculis elit, non placerat massa. In et consectetur lorem. Vivamus feugiat iaculis aliquet. Nunc laoreet augue in leo venenatis, id condimentum nisl eleifend.
  </Paragraph>
</Playground>

> Remember, you can also specify different colors with the `color` prop.

<Playground>
  <Paragraph color="primary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus justo, blandit ut leo in, molestie pretium mauris. Pellentesque eros elit, interdum eget mauris et, ultrices auctor nisl. Praesent a dolor vel nulla vehicula lacinia. Proin iaculis ligula nulla.
  </Paragraph>
</Playground>

## Props

<PropsTable of={Paragraph} />

## Theming

### Schema

```jsx
{
  base: string | Object
}
```