Paragraph

a paragraph of text

Props

a11yTitle

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

string

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

string

"start"

"center"

"end"

"stretch"

"baseline"

color

A color identifier to use for the text color.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

fill

Whether the width should fill the container.

boolean

true

false

gridArea

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

string

"a parent grid area name"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


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

maxLines

Restrict the text to this number of lines and truncate with ellipsis if it is too long to fit. For the text to get truncated, the Paragraph needs to be contained within a layout component such as a Box or generic div.

number

responsive

Whether margin should be scaled for mobile environments.

boolean

true

false

size

The size of the Paragraph text.

string

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"string"

textAlign

How to align the text inside the paragraph.

string

"start"

"center"

"end"

"justify"

React/DOM Properties

At its core, the Paragraph component is a regular <p> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for p elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

paragraph

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

object

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

string

"Segoe UI"

paragraph.textAlign

How to align the text inside the Paragraph.

string

"start"

paragraph.extend

Any additional style for the Paragraph.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.edgeSize

The possible sizes for margin.

object


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