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>

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.

Playground

This is an example of a caption

This is an example of a credit

Component

import React from 'react';
import { Caption } from 'newskit';

export default () => (
  <Caption
    creditText="This is an example of a credit"
    overrides={{ credit: {} }}
  >
    This is an example of a caption
  </Caption>
);