Body

Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
Use "success" and "error" for status. View footer notes for things to avoid.

See this kit in action in our sample UI

Default

Prop

This kit uses default color by default, and can be replaced with colors below:

light lighter success error link
These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

import React from 'react'
import { Body } from 'playbook-ui'

const BodyLight = (props) => {
  return (
    <div>
      <Body
          text="I am a body kit (Default)"
      />
      <Body
          color="light"
          text="I am a body kit (Light)"
      />
      <Body
          color="lighter"
          text="I am a body kit (Lighter)"
      />
      <Body
          color="link"
          text="I am a body kit (Link)"
      />
      <Body
          color="error"
          text="I am a body kit (Error)"
      />
      <Body
          color="success"
          text="I am a body kit (Success)"
      />
    </div>
  )
}

export default BodyLight

Block

import React from 'react'
import { Body } from 'playbook-ui'

const BodyBlock = (props) => {
  return (
    <div>
      <Body>
        {'I am a body kit'}
      </Body>
    </div>
  )
}

export default BodyBlock

Best settings for articles

Using two global props can greatly improve the readability of articles and even forms. Set Max Width to md, and Line Height to loose.

import React from 'react'
import { Body } from 'playbook-ui'

const BodyBlock = (props) => {
    return (
        <>
            <Body
                lineHeight='loose'
                maxWidth='md'
            >
                <p>{`Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.`}</p>
                <br />
                <p>{`- Bradley Whitford`}</p>
            </Body>
        </>
    )
}

export default BodyBlock

Styled tags

Playbook styles the b, strong, a. i, em, small and u tags within the body kit to match Playbook's design system.

import React from 'react'
import { Body } from 'playbook-ui'

const BodyStyled = (props) => {
  return (
    <>
      <Body>
        <b>{"This text is using the <b> tag"}</b>
        <br />
        <br />
        <strong>{"This text is using the <strong> tag"}</strong>
        <br />
        <br />
        <a href="#">{"This text is using the <a> tag"}</a>
        <br />
        <br />
        <i>{"This text is using an <i> tag"}</i>
        <br />
        <br />
        {"This "}<em>word</em>{" is using an <em> tag."}
        <br />
        <br />
        <small>{"This text is using a <small> tag."}</small>
        <br />
        <br />
        <u>{"This text is using a <u> tag."}</u>
      </Body>
    </>
  )
}

export default BodyStyled

Truncate

Prop

truncate | Type: String | Values: "1" | "2" | "3" | "4" | "5"

The truncate prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

import React from 'react';

import Body from 'playbook-ui'
import Caption from 'playbook-ui'
import Flex from 'playbook-ui'

const BodyTruncate = (props) => {
  const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"

  return (
    <Flex
        maxWidth="md"
        orientation="column"
    >
      <Caption
          text="After first row"
      />
      <Body
          marginBottom="md"
          text={lorem}
          truncate="1"
      />

      <Caption
          text="After second row"
      />
      <Body
          marginBottom="md"
          text={lorem}
          truncate="2"
      />

      <Caption
          text="After third row"
      />
      <Body
          text={lorem}
          truncate="3"
      />
    </Flex>
  )
}

export default BodyTruncate

Things to Avoid

Do not use positive and negative variants with each other. Use Pill Kit to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.

UI Samples using Body Kit

Get the full picture. See how this kit is used in our samples.

Conference Statistics

Crm Client List

News Magazine

Trending Repositories

Crowdsourced Posts

Music App

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat