Playbook Design System

Body

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

Caption

Default

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

const CaptionLight = (props) => {
  return (
    <div>
      <Caption
          text="Caption"
      />
      <Caption
          size="lg"
          text="Caption Large"
      />
      <Caption
          size="xs"
          text="Subcaption"
      />
    </div>
  )
}

export default CaptionLight

Block

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

const CaptionBlock = (props) => {
  return (
    <div>
      <Caption>
        {'Block'}
      </Caption>

      <Caption
          size="lg"
      >
        {'Large Block'}
      </Caption>

      <Caption
          size="xs"
      >
        {'Subcaption Block'}
      </Caption>
    </div>
  )
}

export default CaptionBlock

Colors

Prop

Caption kit will use light color by default. Other available colors are:

default 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 { Caption } from 'playbook-ui'

const CaptionColors = (props) => {
  return (
    <div>
      <Caption
          text="Test colors"
      />
      <Caption
          color="success"
          text="Test colors"
      />
      <Caption
          color="error"
          text="Test colors"
      />
      <Caption
          color="link"
          text="Test colors"
      />
    </div>
  )
}

export default CaptionColors

Detail

Default

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

const DetailDefault = (props) => (
  <div>
    <Detail
        text="I am a detail kit"
    />
  </div>
)

export default DetailDefault

Colors

Prop

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

default lighter link error success

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 { Detail } from 'playbook-ui'

const DetailColors = (props) => (
  <div>
    <Detail
        color="default"
        text="I am a detail kit"
    />

    <Detail
        color="lighter"
        text="I am a detail kit"
    />

    <Detail
        color="link"
        text="I am a detail kit"
    />

    <Detail
        color="error"
        text="I am a detail kit"
    />

    <Detail
        color="success"
        text="I am a detail kit"
    />
  </div>
)

export default DetailColors

Bold

Use the bold prop to strongly emphasis your text.

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

const DetailBold = (props) => (
  <div>
    <Detail
        bold
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="default"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="lighter"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="link"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="error"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="success"
        text="I am a bold detail kit"
    />
  </div>
)

export default DetailBold

Title size 1, size 2, & size 3 will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false.
Title size 4 uses a heavy font weight by default and will not accept a lighter font weight.

import React from "react"

import Title from 'playbook-ui'

const TitleLightWeight = (props) => {
  return (
    <div>
      <Title bold={false}
          size={1}
          tag='h1'
          text='Title 1'
      />
      <Title bold={false}
          size={2}
          tag='h2'
          text='Title 2'
      />
      <Title bold={false}
          size={3}
          tag='h2'
          text='Title 3'
      />
    </div>
  )
}

export default TitleLightWeight

Colors

Prop

Title kit will use default color by default. Other available colors are:

*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 Title from 'playbook-ui'

const TitleColors = (props) => {
  return (
    <div>
      <Title
          text="Default Color"
      />
      <Title
          color="link"
          size={3}
          tag="h1"
          text="Title Color"
      />
      <Title
          color="success"
          size={3}
          tag="h1"
          text="Title Color"
      />
      <Title
          color="error"
          size={3}
          tag="h1"
          text="Title Color"
      />
    </div>
  )
}

export default TitleColors

Responsive

The size prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

import React from 'react'
import Title from 'playbook-ui'

const TitleResponsive = (props) => {
  return (
    <>
      <Title
          size={{xs: "3", sm: "2", md: "1"}}
          text="Responsive Title"
      />
    </>
  )
}

export default TitleResponsive

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 Title from 'playbook-ui'
import Caption from 'playbook-ui'
import Flex from 'playbook-ui'

const TitleTruncate = (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"
      />
      <Title
          marginBottom="md"
          size={4}
          text={lorem}
          truncate="1"
      />

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

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

export default TitleTruncate

Link

Color

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

const LinkColor = (props) => (
  <div>
    <div>
      <Link
          href="https://www.google.com/search?q=playbook+design+system"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="body"
          href="https://www.youtube.com/@PowerHRG"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="muted"
          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="destructive"
          href="https://rubygems.org/gems/playbook_ui/"
          text="link example"
      />
    </div>
  </div>
)

export default LinkColor

Underline

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

const LinkUnderline = (props) => (
  <div>
    <Link
        href="#underline"
        text="link example"
        underline
    />
  </div>
)

export default LinkUnderline

Icon

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

const LinkIcon = (props) => (
  <div>
    <div>
      <Link
          href="#icon"
          icon="arrow-up-right-from-square"
          text="link example"
      />
    </div>
    <div>
      <Link
          href="#icon2"
          iconRight="chevron-right"
          text="link example"
      />
    </div>
  </div>
)

export default LinkIcon

Disabled

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

const LinkDisabled = (props) => (
  <div>
    <Link
        disabled
        href="#disabled"
        text="link example"
    />
  </div>
)

export default LinkDisabled

Tag

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

const LinkTag = (props) => (
  <div>
    <Link
        href="#tag"
        icon="arrow-up-right-from-square"
        tag="h1"
        text="h1 link example"
    />
    <Link
        href="#tag2"
        tag="h3"
        text="h3 link example"
        underline
    />
    <Link
        color="destructive"
        href="#tag3"
        tag="h6"
        text="h6 link example"
    />
    <Link
        href="#tag4"
        iconRight="chevron-right"
        tag="p"
        text="p link example"
    />
    <div>
      This is a <Link
          href="#tag5"
          tag="span"
          text="span link example"
    />
    </div>
  </div>
)

export default LinkTag

Typography

Body

Prop

Prop

Caption

Prop

Detail

Prop

Title

Prop

Prop

Prop

Prop

Link

Contribute to Playbook

Power

Connect