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

Default

Code Example

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

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

export default CaptionLight

Block

Code Example

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

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

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

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