Caption

Import

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

Examples

Basic

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

as property

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

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

Density support

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