@combine-labs/combine-polaris
Version:
Combine Lab's product component library. Forked from Shopify's Polaris.
92 lines (65 loc) • 2.02 kB
Markdown
name: Caption
category: Titles and text
platforms:
- android
- ios
- web
keywords:
- labels
- text
- microcopy
- typographic
- graph
- timestamp
- smaller text
- smallest text
- smaller than reading size text
- time text
- compact text
- small text
- android
- ios
# Caption
Caption text size is smaller than the recommended size for general reading. On web, it should be used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or as other kinds of secondary text for list items.
## 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](/design/data-visualizations). Stick to a few words and don’t use this component for complete sentences or longer content.
<!-- usagelist -->
#### Do
- Use caption for labelling data visualizations
- Received April 21, 2017
#### Don’t
- Order #1001 was received on April 21, 2017
- This is your recent activity
<!-- end -->
## Examples
### Default caption
Use to provide details in situations where content is compact and space is tight.
```jsx
<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>
```
<!-- content-for: android -->
<!-- /content-for -->
<!-- content-for: ios -->
<!-- /content-for -->