Caption

Import

import { Caption } from '@contentful/f36-components';
// or
import { Caption } from '@contentful/f36-typography';

Examples

Basic

function CaptionExample() {
  return (
    <Flex flexDirection="column">
      <Caption fontWeight="fontWeightMedium">Status</Caption>
      <Caption>Published</Caption>
    </Flex>
  );
}

as property

We provide you with as property, to allow you to set the tag of the Caption component to another tag than span.

function CaptionExample() {
  return (
    <Flex flexDirection="column">
      <Caption as="p">Status</Caption>
    </Flex>
  );
}

Density support

This component supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density (when wrapped with the DensityProvider).