Skip to main contentGatsby theme Carbon

Caption

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 Colors

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
<Caption>
This is a regular caption. It will attempt to respond to it’s container
element appropriately.
</Caption>

Full-width

<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

propertypropTyperequireddefaultdescription
childrennode
fullWidthboolSet to full width
classNamestringAdd custom class name