UsageCard

Import

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

Examples

Basic UsageCard of usage variant

Hide code
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

Hide code
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.