Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Text

Caption

A caption is a text description of an image or video to describe what is showing.

Status

Supported

Introduced

v0.19.0

View codeView StorybookView Design

Interactive demo

This demo lets you preview the caption component, its variations, and configuration options.

Hathersage Moor in the Peak District

Credit by Matthew Taylor/Alamy

1import React from 'react';
2import { Caption } from 'newskit';
3
4export default () => (
5  <Caption creditText="Credit by Matthew Taylor/Alamy">
6    Hathersage Moor in the Peak District
7  </Caption>
8);
9

Anatomy

The caption contains one required element and one optional element.

ItemNameDescriptionComponentOptional

Options

The caption has options that can be used to provide an appropriate experience for different use cases.

Credit text

A credit to the source can be added underneath the caption text.

Inset spacing

The caption can be inset with increased spacing.

Credit text

A credit to the source can be added underneath the caption text.

Inset spacing

The caption can be inset with increased spacing.

Usage

The following guidance describes how and when to use the caption component appropriately.

Don’t include captions inside images

Legibility can be poor and screen readers cannot read the words. Use live text instead.

Accessibility considerations

Captions help ensure that media like images and video are accessible to everyone by providing supplemental information about what the image is conveying. Captions are displayed within the main content and can be read by assistive technology.

API

Caption

The caption has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?