Import

import { UsageCard } from '@contentful/f36-components';
// or
import { UsageCard } from '@contentful/f36-usage-card';

Examples

Basic UsageCard of `usage` variant

function UsageCardUsageExample() {
  return (
    <UsageCard
      variant="usage"
      header={
        <UsageCard.Header
          title="Asset Bandwidth Usage"
          tooltip="This is a tooltip for the usage card"
        />
      }
      description={
        <UsageCard.Description>
          This is a description of the usage card.
          {'  '}
          <TextLink
            target="_blank"
            rel="noopener noreferrer"
            href={'https://www.contentful.com'}
          >
            Learn more
          </TextLink>
        </UsageCard.Description>
      }
    >
      <UsageCount
        variant="periodic"
        value={150}
        valueUnit="GB"
        periodType="year"
      />
    </UsageCard>
  );
}

Open in Playground

Basic UsageCard of `info` variant

function UsageCardInfoExample() {
  return (
    <UsageCard
      variant="info"
      header={
        <UsageCard.Header
          title="This is an Info Card"
          tooltip="This is a tooltip for Info Card"
        />
      }
      description={
        <UsageCard.Description>
          This is a description of the info card.
          {'  '}
          <TextLink
            target="_blank"
            rel="noopener noreferrer"
            href={'https://www.contentful.com'}
          >
            Learn more
          </TextLink>
        </UsageCard.Description>
      }
    >
      <UsageCount
        variant="consumption"
        value={150}
        valueUnit="GB"
        valueDescription="Used this month"
      />
    </UsageCard>
  );
}

Open in Playground

UsageCard areas

The UsageCard component offers 4 individually setable areas, three of them can be set via the props header, description and variant.

Prop	Description	Recommended child components
`children`	Elements handed over as children to the UsageCard component will be rendered as the UsageCard body. The common case is using `UsageCount` component for rendering usage value.	`UsageCount`
`header`	`header` prop expects compound component `UsageCard.Header`. `UsageCard.Header` can take `children`, `title` and `tooltip` as props. Title value will be rendered as `Subheading`, tooltip will be rendered inside `Tooltip` with icon.	`UsageCard.Header`
`description`	`description` prop expects compound component `UsageCard.Description`. Child-Components should be wraped in `UsageCard.Description`. Common use case is using `Text` or `TextLink` with as child-components.	`UsageCard.Description` with `Text` or `TextLink`
`variant`	`variant` prop expects `usage` or `info`. It's responsible for look and feel of the `UsageCard`, with `info` set the `backgroundColor` is `gray100` and border is invisible.	N/A

Props (API reference)

Open in Storybook

Name	Type	Default
className	string CSS class to be appended to the root element
description	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode>
header	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode>
testId	string A [data-test-id] attribute used for testing purposes
variant	"usage" "info" The type of the card.	'usage'

Import

Examples

Basic UsageCard of usage variant

Basic UsageCard of info variant

UsageCard areas

Prop

Description

Recommended child components

Props (API reference)

Name

Type

Default

Help improve this page

Basic UsageCard of `usage` variant

Basic UsageCard of `info` variant