# DataCard

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

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

## Examples

DataCard is a flexible card component for displaying data with visualizations. It wraps `CardRoot` and provides a structured layout for thumbnails, titles, subtitles, and visualization content like progress bars or circles.

### 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:**

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

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

**After:**

```jsx
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" />}
>
  <ProgressBarWithFixedLabels startLabel={0} endLabel={45} labelPlacement="below">
    <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
  </ProgressBarWithFixedLabels>
</DataCard>;
```

### Basic Examples

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

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="Progress indicator"
        thumbnail={exampleThumbnail}
        title="Progress Bar Card"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 25.25%
          </Text>
        }
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={45} labelPlacement="below" startLabel={0}>
            <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        layout="horizontal"
        subtitle="Circular progress"
        thumbnail={exampleThumbnail}
        title="Progress Circle Card"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 25.25%
          </Text>
        }
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="60% complete"
            progress={0.6}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </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).

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="Vertical layout stacks content"
        thumbnail={exampleThumbnail}
        title="Vertical Layout"
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={75} labelPlacement="below" startLabel={0}>
            <ProgressBar accessibilityLabel="75% complete" progress={0.75} weight="semiheavy" />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        layout="horizontal"
        subtitle="Horizontal layout places content side by side"
        thumbnail={exampleThumbnail}
        title="Horizontal Layout"
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="75% complete"
            progress={0.75}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </VStack>
  );
}
```

### Title Accessory

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

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="With positive trend"
        thumbnail={exampleThumbnail}
        title="Positive Trend"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 8.5%
          </Text>
        }
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={90} labelPlacement="below" startLabel={0}>
            <ProgressBar
              accessibilityLabel="90% complete"
              color="fgPositive"
              progress={0.9}
              weight="semiheavy"
            />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        layout="horizontal"
        subtitle="Time remaining"
        thumbnail={exampleThumbnail}
        title="Countdown"
        titleAccessory={
          <Text color="fgMuted" font="label1">
            2h left
          </Text>
        }
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="70% complete"
            progress={0.7}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </VStack>
  );
}
```

### 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`.

```jsx live
function Example() {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        ref={ref1}
        renderAsPressable
        layout="vertical"
        onClick={() => alert('Progress bar card clicked!')}
        subtitle="Clickable progress card"
        thumbnail={exampleThumbnail}
        title="Click to View Details"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 8.5%
          </Text>
        }
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={75} labelPlacement="below" startLabel={0}>
            <ProgressBar accessibilityLabel="75% complete" progress={0.75} weight="semiheavy" />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        ref={ref2}
        renderAsPressable
        as="a"
        href="https://www.coinbase.com"
        layout="horizontal"
        subtitle="Card with link"
        target="_blank"
        thumbnail={exampleThumbnail}
        title="Open in New Tab"
        titleAccessory={
          <Text color="fgMuted" font="label1">
            External
          </Text>
        }
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="85% complete"
            progress={0.85}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </VStack>
  );
}
```

### Style Customization

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

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        styles={{
          root: { borderWidth: 2, borderColor: '#0066FF' },
        }}
        subtitle="Custom border"
        thumbnail={exampleThumbnail}
        title="Custom Root Styles"
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={50} labelPlacement="below" startLabel={0}>
            <ProgressBar accessibilityLabel="50% complete" progress={0.5} weight="semiheavy" />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        layout="horizontal"
        styles={{
          root: { backgroundColor: '#F5F5F5' },
          headerContainer: { paddingInlineStart: 'var(--space-4)' },
        }}
        subtitle="Custom background and padding"
        thumbnail={exampleThumbnail}
        title="Custom Layout Styles"
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="70% complete"
            progress={0.7}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </VStack>
  );
}
```

### Multiple Cards

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

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum" aria-hidden="true" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="Daily goal progress"
        thumbnail={exampleThumbnail}
        title="Steps Today"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            6,500 / 10,000
          </Text>
        }
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={65} labelPlacement="below" startLabel={0}>
            <ProgressBar accessibilityLabel="65% complete" progress={0.65} weight="semiheavy" />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
      <DataCard
        layout="horizontal"
        subtitle="Weekly completion"
        thumbnail={exampleThumbnail}
        title="Workout Goal"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            5 / 7 days
          </Text>
        }
      >
        <Box alignItems="center" height="100%">
          <ProgressCircle
            accessibilityLabel="71% complete"
            color="fgPositive"
            progress={0.71}
            size={100}
            weight="heavy"
          />
        </Box>
      </DataCard>
    </VStack>
  );
}
```

### With LineChart

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

```jsx live
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"
            aria-hidden="true"
            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"
            aria-hidden="true"
            shape="circle"
            size="l"
            src={assets.btc.imageUrl}
          />
        }
        title="Chart with Trend"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 25.25%
          </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"
            aria-hidden="true"
            shape="circle"
            size="l"
            src={ethBackground}
          />
        }
        title="Actionable Chart Card"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 8.5%
          </Text>
        }
      >
        <LineChart
          showArea
          accessibilityLabel="Ethereum price chart"
          areaType="dotted"
          height={120}
          inset={0}
          series={lineChartSeries}
        />
      </DataCard>
    </VStack>
  );
}
```

### Accessibility

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

```jsx live
function Example() {
  const exampleThumbnail = (
    <RemoteImage alt="Ethereum logo" shape="circle" size="l" src={ethBackground} />
  );

  return (
    <VStack gap={2} width={480}>
      <DataCard
        layout="vertical"
        subtitle="Portfolio allocation"
        thumbnail={exampleThumbnail}
        title="ETH Holdings"
        titleAccessory={
          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
            ↗ 12.5%
          </Text>
        }
      >
        <Box paddingTop={5}>
          <ProgressBarWithFixedLabels endLabel={80} labelPlacement="below" startLabel={0}>
            <ProgressBar
              accessibilityLabel="ETH holdings at 80% of target, currently $4,000 of $5,000 goal"
              progress={0.8}
              weight="semiheavy"
            />
          </ProgressBarWithFixedLabels>
        </Box>
      </DataCard>
    </VStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `layout` | `horizontal \| vertical` | Yes | `-` | Layout orientation of the card. Horizontal places header and visualization side by side, vertical stacks them. |
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or React node to display as the card title. When a string is provided, it will be rendered in a CardTitle component. |
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
| `alignSelf` | `ResponsiveProp<center \| auto \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
| `as` | `symbol \| object \| path \| ComponentClass<any, any> \| FunctionComponent<any> \| area \| style \| div \| a \| abbr \| address \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view` | No | `-` | The underlying element or component the polymorphic component will render.  Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Border color of the element. |
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | child node to display as the visualization (e.g., ProgressBar or ProgressCircle). |
| `className` | `string` | No | `-` | Apply class names to the outer container. |
| `classNames` | `({ layoutContainer?: string; headerContainer?: string \| undefined; textContainer?: string \| undefined; titleContainer?: string \| undefined; } & { root?: string \| undefined; }) \| undefined` | No | `-` | - |
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
| `display` | `ResponsiveProp<grid \| block \| inline \| none \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| revert \| list-item>` | No | `-` | - |
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<row \| row-reverse \| column \| column-reverse>` | No | `-` | - |
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
| `focusable` | `boolean` | No | `-` | - |
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontSize` | `ResponsiveProp<inherit \| FontSize>` | No | `-` | - |
| `fontWeight` | `ResponsiveProp<inherit \| FontWeight>` | No | `-` | - |
| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<inherit \| LineHeight>` | No | `-` | - |
| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events |
| `margin` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -3 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
| `ref` | `any` | No | `-` | - |
| `renderAsPressable` | `boolean` | No | `-` | If true, the CardRoot will be rendered as a Pressable component. |
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `style` | `CSSProperties` | No | `-` | - |
| `styles` | `({ layoutContainer?: CSSProperties; headerContainer?: CSSProperties \| undefined; textContainer?: CSSProperties \| undefined; titleContainer?: CSSProperties \| undefined; } & { root?: CSSProperties \| undefined; }) \| undefined` | No | `-` | - |
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or React node to display as the card subtitle. When a string is provided, it will be rendered in a CardSubtitle component. |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
| `textTransform` | `ResponsiveProp<none \| uppercase \| lowercase \| capitalize>` | No | `-` | - |
| `thumbnail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to display as a thumbnail in the header area. |
| `titleAccessory` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to display as a title accessary. |
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
| `userSelect` | `ResponsiveProp<text \| auto \| none \| all>` | No | `-` | - |
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |