DataCard | Coinbase Design System

DataCard

@coinbase/cds-web@9.0.2

A flexible card component for displaying data with visualizations like progress bars and circles. It supports horizontal and vertical layouts with customizable thumbnails and title accessories.

import { DataCard } from '@coinbase/cds-web/alpha/data-card'

Related components

DataCard is a flexible card component for displaying data with visualizations. It provides a structured layout for thumbnails, titles, subtitles, and visualization content. Pass any visualization component as children, such as ProgressBar, ProgressCircle, LineChart, or custom content.

Basic Examples

DataCard supports two layouts: vertical (stacked) and horizontal (side-by-side). Pass visualization components as children.

With LineChart

DataCard can also display chart visualizations like LineChart for showing price trends or time-series data.

Live Code

function Example() {
  const lineChartData = useMemo(
    () => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58, 42, 65, 78, 55, 40, 62],
    [],
  );

  const lineChartSeries = useMemo(
    () => [
      {
        id: 'price',
        data: lineChartData,
        color: 'var(--color-accentBoldBlue)',
      },
    ],
    [lineChartData],
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="Price trend"
        thumbnail={
          <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
        }
        title="Line Chart Card"
      >
        <LineChart
          showArea
          accessibilityLabel="Ethereum price chart"
          areaType="dotted"
          height={120}
          inset={0}
          series={lineChartSeries}
        />
      </DataCard>
      <DataCard
        layout="vertical"
        subtitle="Price trend"
        thumbnail={
          <RemoteImage alt="Bitcoin thumbnail" shape="circle" size="l" src={assets.btc.imageUrl} />
        }
        title="Chart with Trend"
        titleAccessory={
          <Text color="fgNegative" font="label1">
            ↘ 5.8%
          </Text>
        }
      >
        <LineChart
          showArea
          accessibilityLabel="Bitcoin price chart"
          areaType="dotted"
          height={100}
          inset={0}
          series={lineChartSeries}
        />
      </DataCard>
      <DataCard
        renderAsPressable
        as="a"
        href="https://www.coinbase.com"
        layout="vertical"
        subtitle="Clickable line chart card"
        target="_blank"
        thumbnail={
          <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
        }
        title="Actionable Chart Card"
        titleAccessory={
          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
            ↗ 8.5%
          </Text>
        }
      >
        <LineChart
          showArea
          accessibilityLabel="Ethereum price chart"
          areaType="dotted"
          height={120}
          inset={0}
          series={lineChartSeries}
        />
      </DataCard>
    </VStack>
  );
}

With PercentageBarChart

PercentageBarChart can be passed directly as the children of a DataCard to visualize part-to-whole data alongside a title and subtitle.

Live Code

function Example() {
  const [tick, setTick] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 4), 1000);
    return () => clearInterval(id);
  }, []);

  const PredictionLegendEntry = memo(function PredictionLegendEntry({ seriesId, label, color }) {
    const { series } = useCartesianChartContext();
    const percentage = series.find((s) => s.id === seriesId)?.data?.[0] ?? 0;

    return (
      <Chip
        compact
        styles={{
          root: {
            borderColor: color,
            borderWidth: 2,
            background: `color-mix(in srgb, ${color} 12%, transparent)`,
          },
        }}
      >
        <HStack alignItems="center" gap={0.5} style={{ color }}>
          <Text color="currentColor" font="label1">
            {label}
          </Text>
          <Text color="currentColor" font="label1">
            &middot;
          </Text>
          <RollingNumber
            color="currentColor"
            font="label1"
            format={{ style: 'percent', maximumFractionDigits: 0 }}
            value={percentage / 100}
          />
        </HStack>
      </Chip>
    );
  });

  const PredictionCard = useMemo(
    () =>
      memo(function PredictionCard({ question, subtitle, yesValue }) {
        const noValue = 100 - yesValue;

        return (
          <DataCard layout="vertical" subtitle={subtitle} title={question}>
            <Box paddingTop={2}>
              <PercentageBarChart
                barMinSize={8}
                borderRadius={8}
                height={56}
                legend={<Legend EntryComponent={PredictionLegendEntry} paddingTop={2} />}
                series={[
                  { id: 'yes', data: yesValue, label: 'Yes', color: 'var(--color-fgPositive)' },
                  { id: 'no', data: noValue, label: 'No', color: 'var(--color-fgNegative)' },
                ]}
                stackGap={4}
              />
            </Box>
          </DataCard>
        );
      }),
    [],
  );

  const btcYes = 50 + Math.sin(tick * 0.05) * 49;

  return (
    <VStack gap={2} width={480}>
      <DataCard layout="vertical" subtitle="Top holdings" title="Portfolio Allocation">
        <Box paddingTop={2}>
          <PercentageBarChart
            barMinSize={8}
            borderRadius={8}
            height={48}
            legend={<Legend paddingTop={2} />}
            series={[
              { id: 'btc', data: 55, label: 'BTC', color: assets.btc.color },
              { id: 'eth', data: 30, label: 'ETH', color: assets.eth.color },
              { id: 'sushi', data: 15, label: 'SUSHI', color: assets.sushi.color },
            ]}
            stackGap={4}
          />
        </Box>
      </DataCard>
      <PredictionCard question="Will BTC reach $200k?" subtitle="Closes Dec 31" yesValue={btcYes} />
    </VStack>
  );
}

Layout Variations

Use layout="vertical" for stacked layouts (thumbnail on left, visualization below) or layout="horizontal" for side-by-side layouts (header on left, visualization on right).

Title Accessory

Use titleAccessory to display supplementary information inline with the title, such as trends, percentages, or status indicators.

Interactive Cards

Use renderAsPressable to make the card interactive. You can render as a button with onClick or as a link with as="a" and href.

Style Customization

Use styles and classNames props to customize specific parts of the card layout.

Multiple Cards

DataCards work well in lists or dashboards to display multiple data points.

Accessibility

Ensure all visualization components have appropriate accessibilityLabel props to convey the progress information to screen readers.

Interactive Cards

When making DataCard interactive with renderAsPressable:

If as is set to "button" or "a", renderAsPressable defaults to true automatically. Add an accessibilityLabel to summarize the card's content for screen reader users, ensuring all visual text of the card is included in the label (e.g., accessibilityLabel="ETH Holdings, 45% progress, View details")

Heading Semantics

By default, the title prop renders as a <div>. If you need the title to be a proper heading element for document structure, pass a custom Text node with the as prop:

<DataCard
  title={
    <Text as="h3" font="headline">
      Card Title
    </Text>
  }
  // ...other props
/>

Color Contrast for Gain/Loss Text

When displaying gain or loss percentages in DataCard, be aware of color contrast differences between light and dark modes.

Why this matters: DataCard uses bgAlternate as its background color. In light mode, the semantic fgPositive token does not meet WCAG AA contrast requirements:

Mode	Color	Background	Contrast Ratio	WCAG AA (4.5:1)
Light	`fgPositive` (`green60`)	`bgAlternate` (`gray10`)	~3.6:1	❌ Fails
Light	`green70`	`bgAlternate` (`gray10`)	~4.8:1	✅ Passes
Dark	`fgPositive` (`green60`)	`bgAlternate` (`gray5`)	~6.2:1	✅ Passes

Recommendation:

Light mode: Use green70 for positive values instead of fgPositive
Dark mode: fgPositive meets WCAG AA requirements and can be used as-is
Both modes: fgNegative meets WCAG AA requirements

On web, use CSS variables for light mode compatibility:

{
  /* Gain text */
}
<Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
  ↗ 12.5%
</Text>;

{
  /* Loss text */
}
<Text color="fgNegative" font="label1">
  ↘ 3.2%
</Text>;

Migration from Legacy DataCard

The new DataCard from @coinbase/cds-web/alpha/data-card replaces the legacy DataCard. The new version provides more flexibility with custom layouts and visualization components.

Before:

import { DataCard } from '@coinbase/cds-web/cards/DataCard';

<DataCard
  title="Progress"
  description="45% complete"
  progress={0.45}
  progressVariant="bar"
  startLabel={45}
/>;

After:

import { DataCard } from '@coinbase/cds-web/alpha/data-card';

<DataCard
  title="Progress"
  subtitle="45% complete"
  layout="vertical"
  thumbnail={<RemoteImage src={assetUrl} shape="circle" size="l" />}
>
  <Box paddingTop={6}>
    <ProgressBarWithFixedLabels
      startLabel={{
        value: 45,
        render: (num) => (
          <Text color="fgMuted" font="legal">
            {num}%
          </Text>
        ),
      }}
      labelPlacement="below"
    >
      <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
    </ProgressBarWithFixedLabels>
  </Box>
</DataCard>;

Basic Examples​

With LineChart​

With PercentageBarChart​

Layout Variations​

Title Accessory​

Interactive Cards​

Style Customization​

Multiple Cards​

Accessibility​

Interactive Cards​

Heading Semantics​

Color Contrast for Gain/Loss Text​

Migration from Legacy DataCard​

Is this page useful?

Basic Examples

With LineChart

With PercentageBarChart

Layout Variations

Title Accessory

Interactive Cards

Style Customization

Multiple Cards

Accessibility

Interactive Cards

Heading Semantics

Color Contrast for Gain/Loss Text

Migration from Legacy DataCard