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

Code Example

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

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

Things to Avoid

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

Caption

See this kit in action in our sample UI

Things to Avoid

UI Samples using Caption Kit

Conference Statistics

Crm Client List

News Magazine

Crowdsourced Posts

Music App