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

Code Example

Close

import React from 'react'
import { Body } from '../../'

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

export default BodyLight

Block

Code Example

Close

import React from 'react'
import { Body } from '../../'

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

export default BodyBlock

Styled b/strong/a tags

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

Code Example

Close

import React from 'react'
import { Body } from '../..'

const BodyStyled = (props) => {
  return (
    <div>
      <Body {...props}>
        <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>
      </Body>
    </div>
  )
}

export default BodyStyled

Caption

Default

Code Example

Close

import React from 'react'
import { Caption } from '../../'

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

export default CaptionLight

Block

Code Example

Close

import React from 'react'
import { Caption } from '../../'

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

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

      <Caption
          size="xs"
          {...props}
      >
        {'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

Code Example

Close

import React from 'react'
import { Caption } from '../../'

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

export default CaptionColors

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

Code Example

Close

import React from 'react'

import Title from '../_title'

const TitleLightWeight = (props) => {
  return (
    <div>
      <Title
          bold={false}
          size={1}
          tag="h1"
          text="Title 1"
          {...props}
      />
    </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

Code Example

Close

import React from 'react'

import Title from '../_title'

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

export default TitleColors

Typography

Body

Prop

Caption

Prop

Title

Prop

Prop

Prop