Newskit Logo
View Github

Caption

Overview

A caption is a sentence often added to an image or video to describe or explain what the image or video is showing. Sometimes a credit to the owner of the source is added. The caption has two main elements, the caption text and an optional credit text.

Usage

The Caption component is generally placed below the related media on the page. The component takes text as its child.

Variants

The are two variants of the caption component - a caption without inset <Caption/> and a caption with inset <CaptionInset/>.

Props

childrenobject
This is the text of the Caption.
creditTextstring
If provided, supplies the content of the credit portion of the component.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset of the component.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the component..
spaceStackMQ<string>
If provided, this overrides the spacing between the caption and the credit.
creditobject
If provided, this overrides the styling of the credit portion of the component.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the credit text.
stylePresetMQ<string>
If provided, this overrides the style preset of the credit text.
spaceInsetMQ<string>
This property is deprecated. Use paddingInline and paddingBlock instead. If provided, this overrides the padding of the Caption. This override should only be used with CaptionInset. Otherwise, spaceInset040 or spaceInset050 is used depending on the `size` prop.
paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.

Playground

This is an example of a caption

This is an example of a credit

Caption style preset override
Caption typography preset override
Caption spaceStack override
Credit style preset override
Credit typography preset override
1import React from 'react';
2import { Caption } from 'newskit';
3
4export default () => (
5  <Caption
6    creditText="This is an example of a credit"
7    overrides={{ credit: {} }}
8  >
9    This is an example of a caption
10  </Caption>
11);
12