Skip to content

Caption

Jump to bottom
ShannonTucker edited this page Feb 15, 2022 · 7 revisions

Captions are used for very short explanations in images/illustrations, forms, or as secondary text, such as in the cards component.

Overview

There are 3 caption styles available

  1. Large - 18px

large caption

  1. Regular - 16px

regular caption

  1. Small - 14px

small caption

Usage

When to use

  • To provide further context or attribution to an image/illustration, video, table, or chart
  • As secondary text, as seen in the cards component

When NOT to use

  • As a subtitle to a heading
  • For important text that should be easily visible
  • For long text blocks (i.e., more than 2-3 sentences)

How to use

  • Use whichever of the 3 caption styles makes sense for your designs
  • The colour 'Multi-use/Neutrals/grey85a' is recommended for captions
  • Keep caption text to a few sentences maximum

Customizing captions

  • Colour for captions can be changed if required; however, ensure that you are meeting WCAG AA requirements (text and background need a colour contrast ratio of 4.5:1)

4A Assessment

Captions did not exist in the Canada.ca design system, so we added them to our Extended GC Design Library - DECD using best practices from other design systems.

Clone this wiki locally