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