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.

Rails
React

Light UI

Code Example

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

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

export default CaptionLight

Dark UI

Code Example

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

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

export default CaptionDark

Things to Avoid

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

5.2.0

Caption

Things to Avoid