Caption

Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.

See this kit in action in our sample UI

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

Things to Avoid

If the text gets very long when using default or large size, use a different typography style.

UI Samples using Caption Kit

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

Conference Statistics

Crm Client List

News Magazine

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