The <Caption> component is typically used below images or videos. They will default to 4 columns wide unless placed inside a <Row> component. In this case, it will assume the full width of its containing column.

Example

Normal

This is a regular caption. It will attempt to respond to it’s container element appropriately.

Full-width Colors

This is a full width caption. With this prop, the caption’s width will be 100% so it will fill its container.

Code

Normal

components/Caption/Caption.js
Copy to clipboard
<Caption>
  This is a regular caption. It will attempt to respond to it’s container
  element appropriately.
</Caption>

Full-width

components/Caption/Caption.js
Copy to clipboard
<Caption fullWidth>

This is a full width caption. With this prop, the caption’s width will be 100%
so it will fill its container.

</Caption>

Props

property	propType	description
children	node
fullWidth	bool	Set to full width
className	string	Add custom class name

Edit this page on GitHub

Components: Aside

Components: Code blocks