Playbook Design System

Body

Default

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
          status="negative"
          text="I am a body kit (Status: negative)"
          {...props}
      />
      <Body
          status="positive"
          text="I am a body kit (Status: positive)"
          {...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

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

Title

Light UI

Code Example

Close

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

const TitleLight = (props) => {
  return (
    <div>
      <Title
          text="Default Title"
          {...props}
      />
      <br />
      <Title
          size={4}
          tag="h4"
          text="Title 4"
          {...props}
      />
      <Title
          size={3}
          tag="h3"
          text="Title 3"
          {...props}
      />
      <Title
          size={2}
          tag="h2"
          text="Title 2"
          {...props}
      />
      <Title
          size={1}
          tag="h1"
          text="Title 1"
          {...props}
      />
    </div>
  )
}

export default TitleLight

Variants

Wrap anchor tags around the kit to make it clickable.

Link variant can only be applied to size 4.

Code Example

Close

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

const TitleVariants = (props) => {
  return (
    <div>
      <Title
          size={4}
          tag="h4"
          text="Title 4 (link)"
          variant="link"
          {...props}
      />
    </div>
  )
}

export default TitleVariants

Typography

Body

Caption

Title