UsageCard

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>
  );
}

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>
  );
}

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 |