Paragraph

a paragraph of text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Storybook

CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

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"

color

A color identifier to use for the text color.

"neutral-1"

fill

Whether the width should fill the container.

truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

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.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

responsive

Whether margin should be scaled for mobile environments.

truefalse

size

The size of the Paragraph text.

"small""medium""large""xlarge""xxlarge""string"

textAlign

How to align the text inside the paragraph.

"start""center""end"

Theme

paragraph

The possible sizes of the paragraph in terms of its max-width, font-size and line-height.

{
  "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.textAlign

How to align the text inside the Paragraph.

string

paragraph.extend

Any additional style for the Paragraph.

"any CSS"

(props) => {}

global.edgeSize

The possible sizes for margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}