Caption

Caption text size is smaller than the recommended size for general reading. It should be used only in a graph or as a timestamp in a list.


Examples

Use to provide details in situations where content is compact and space is tight.

Drag to resize example
<List>
  <List.Item>Order #1001 <Caption>Received April 21, 2017</Caption></List.Item>
  <List.Item>Order #1002 <Caption>Received April 22, 2017</Caption></List.Item>
</List>
Name
Type
Description
children
React.ReactNode
The content to use as a graph label or timestamp

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants need to understand a complex graphic or arrangement of content in a small area.

Solution

Use smaller text for short labels on graphs or lists where space is limited.


Best practices

  • Use for secondary labels in graphs and charts
  • May be used for timestamps in lists of content
  • Don’t use this component for other cases
  • Don’t use this component for text longer than a few words
  • Don’t use this component for aesthetic effect or to break from the standard text size

Content guidelines

Captions

Captions are primarily used in data visualizations. Stick to a few words and don’t use this component for complete sentences or longer content.

  • Use caption for labelling data visualizations Diagram of using captions to label graphs and other data content

  • Received April 21, 2017

  • Order #1001 was received on April 21, 2017

  • This is your recent activity