@dotconnor/grommet
Version:
focus on the essential experience
273 lines (220 loc) • 3.7 kB
Markdown
## Paragraph
A paragraph of text.
[](https://storybook.grommet.io/?selectedKind=Type-Paragraph&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/paragraph&module=%2Fsrc%2FParagraph.js)
## Usage
```javascript
import { Paragraph } from 'grommet';
<Paragraph />
```
## Properties
**a11yTitle**
Custom label to be used by screen readers. When provided, an aria-label will
be added to the element.
```
string
```
**alignSelf**
How to align along the cross axis when contained in
a Box or along the column axis when contained in a Grid.
```
start
center
end
stretch
```
**gridArea**
The name of the area to place
this inside a parent Grid.
```
string
```
**margin**
The amount of margin around the component. An object can
be specified to distinguish horizontal margin, vertical margin, and
margin on a particular side.
```
none
xxsmall
xsmall
small
medium
large
xlarge
{
bottom:
xxsmall
xsmall
small
medium
large
xlarge
string,
end:
xxsmall
xsmall
small
medium
large
xlarge
string,
horizontal:
xxsmall
xsmall
small
medium
large
xlarge
string,
left:
xxsmall
xsmall
small
medium
large
xlarge
string,
right:
xxsmall
xsmall
small
medium
large
xlarge
string,
start:
xxsmall
xsmall
small
medium
large
xlarge
string,
top:
xxsmall
xsmall
small
medium
large
xlarge
string,
vertical:
xxsmall
xsmall
small
medium
large
xlarge
string
}
string
```
**color**
A color identifier to use for the text color.
```
string
{
dark: string,
light: string
}
```
**fill**
Whether the width should fill the container.
```
boolean
```
**responsive**
Whether margin should be scaled for mobile environments. Defaults to `true`.
```
boolean
```
**size**
The size of the Paragraph text. Defaults to `medium`.
```
small
medium
large
xlarge
xxlarge
string
```
**textAlign**
How to align the text inside the paragraph. Defaults to `start`.
```
start
center
end
```
## Intrinsic element
```
p
```
## Theme
**paragraph**
The possible sizes of the paragraph in terms of its max-width,
font-size and line-height. Expects `object`.
Defaults to
```
{
small: {
size: '14px',
height: '20px',
maxWidth: '336px',
},
medium: {
size: '18px',
height: '24px',
maxWidth: '432px',
},
large: {
size: '22px',
height: '28px',
maxWidth: '528px',
},
xlarge: {
size: '26px',
height: '32px',
maxWidth: '624px',
},
xxlarge: {
size: '34px',
height: '40px',
maxWidth: '816px',
},
}
```
**paragraph.font.family**
The font family to use for Paragraph. Expects `string`.
Defaults to
```
undefined
```
**paragraph.textAlign**
How to align the text inside the Paragraph. Expects `string`.
Defaults to
```
start
```
**paragraph.extend**
Any additional style for the Paragraph. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**global.edgeSize**
The possible sizes for margin. Expects `object`.
Defaults to
```
{
edgeSize: {
none: '0px',
hair: '1px',
xxsmall: '3px',
xsmall: '6px',
small: '12px',
medium: '24px',
large: '48px',
xlarge: '96px',
responsiveBreakpoint: 'small',
},
}
```