# ContentCard

**📖 Live documentation:** https://cds.coinbase.com/components/cards/ContentCard/

A flexible card component for displaying content.

## Import

```tsx
import { ContentCard } from '@coinbase/cds-web/cards/ContentCard'
```

## Examples

ContentCard is a flexible, composable card component built with `ContentCardHeader`, `ContentCardBody`, and `ContentCardFooter` sub-components. It can display various content layouts including text, media, and interactive elements.

:::note Semantic HTML
ContentCard and its sub-components render semantic HTML elements by default:

- `ContentCard` renders as `<article>`
- `ContentCardHeader` renders as `<header>`
- `ContentCardFooter` renders as `<footer>`

You can override these defaults using the `as` prop on each component.
:::

### Basic Examples

ContentCard uses sub-components for flexible layout. Combine `ContentCardHeader`, `ContentCardBody`, and `ContentCardFooter` to create your card structure.

```jsx live
function Example() {
  return (
    <VStack gap={2} maxWidth={375}>
      <ContentCard>
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
          actions={
            <HStack gap={0}>
              <IconButton
                transparent
                accessibilityLabel="favorite"
                name="star"
                variant="secondary"
              />
              <IconButton
                transparent
                accessibilityLabel="More options"
                name="more"
                variant="secondary"
              />
            </HStack>
          }
        />
        <ContentCardBody
          title="Ethereum Network Shatters Records With Hashrate Climbing to 464 EH/s"
          description="This is a description of the record-breaking hashrate milestone."
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <Text as="p" color="fgMuted" font="label2" numberOfLines={1}>
                $3,081.01
              </Text>
              <Text as="p" color="fgPositive" font="label2">
                ↗ 6.37%
              </Text>
            </HStack>
          }
        />
        <ContentCardFooter>
          <RemoteImageGroup shape="circle" size={32}>
            <RemoteImage src={assets.eth.imageUrl} />
            <RemoteImage src={assets.btc.imageUrl} />
          </RemoteImageGroup>
          <Button compact variant="secondary">
            Share
          </Button>
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}
```

### Media Placement

Use the `mediaPlacement` prop on `ContentCardBody` to control where media is positioned relative to the content.

```jsx live
function Example() {
  const exampleMedia = (
    <RemoteImage alt="Ethereum background" source={ethBackground} width="100%" />
  );

  return (
    <VStack gap={2} maxWidth={375}>
      <Text as="h3" font="headline">
        mediaPlacement: top (default)
      </Text>
      <ContentCard>
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="Media at top"
          description="The media appears above the text content."
          media={exampleMedia}
          mediaPlacement="top"
        />
      </ContentCard>

      <Text as="h3" font="headline">
        mediaPlacement: bottom
      </Text>
      <ContentCard>
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="Media at bottom"
          description="The media appears below the text content."
          media={exampleMedia}
          mediaPlacement="bottom"
        />
      </ContentCard>

      <Text as="h3" font="headline">
        mediaPlacement: end
      </Text>
      <ContentCard>
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="Media at end"
          description="The media appears to the right of the text content."
          media={exampleMedia}
          mediaPlacement="end"
        />
      </ContentCard>

      <Text as="h3" font="headline">
        mediaPlacement: start
      </Text>
      <ContentCard>
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="Media at start"
          description="The media appears to the left of the text content."
          media={exampleMedia}
          mediaPlacement="start"
        />
      </ContentCard>
    </VStack>
  );
}
```

### With Background

Apply a background color to the card using the `background` prop. When using a background, consider using `variant="inverse"` on buttons.

```jsx live
function Example() {
  const exampleMedia = (
    <RemoteImage
      alt="Ethereum background"
      src={ethBackground}
      style={{ objectFit: 'cover', borderRadius: '24px' }}
      width="100%"
    />
  );

  return (
    <VStack gap={2} maxWidth={375}>
      <ContentCard background="bgAlternate">
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="Card with Background"
          description="This card has an alternate background color."
          media={exampleMedia}
        />
        <ContentCardFooter>
          <RemoteImageGroup shape="circle" size={32}>
            <RemoteImage src={assets.eth.imageUrl} />
            <RemoteImage src={assets.btc.imageUrl} />
          </RemoteImageGroup>
          <Button compact variant="inverse">
            Share
          </Button>
        </ContentCardFooter>
      </ContentCard>

      <ContentCard background="bgAlternate">
        <ContentCardHeader
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
          subtitle="News"
        />
        <ContentCardBody
          title="No Media with Background"
          description="This card has no media element."
        />
        <ContentCardFooter gap={4} justifyContent="space-between" paddingTop={0.5}>
          <IconCounterButton accessibilityLabel="like, 99 likes" count={99} icon="heart" />
          <IconCounterButton
            accessibilityLabel="comment, 4200 comments"
            count={4200}
            icon="comment"
          />
          <IconCounterButton
            accessibilityLabel="share, 32 shares"
            count={32}
            icon="arrowsHorizontal"
          />
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}
```

### Rewards Card Example

Example showing a rewards-style content card with claim button.

```jsx live
function Example() {
  return (
    <VStack gap={2} maxWidth={375}>
      <ContentCard gap={3}>
        <ContentCardBody
          title={
            <Text as="p" font="body" paddingTop={0.5}>
              Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s
            </Text>
          }
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <Text as="p" color="fgMuted" font="label2" numberOfLines={1}>
                BTC
              </Text>
              <Text as="p" color="fgPositive" font="label2">
                ↗ 5.12%
              </Text>
            </HStack>
          }
          media={
            <RemoteImage
              alt="Rewards banner"
              src={ethBackground}
              style={{ objectFit: 'cover', borderRadius: '24px' }}
              width="100%"
            />
          }
        />
        <ContentCardFooter alignItems="center">
          <HStack alignItems="center" gap={1}>
            <Avatar src={assets.btc.imageUrl} size="xl" />
            <VStack>
              <Text as="span" font="legal" color="fgMuted">
                Reward
              </Text>
              <Text as="span" font="headline">
                +$15 ACS
              </Text>
            </VStack>
          </HStack>
          <Button compact accessibilityLabel="Claim now" variant="secondary">
            Claim Now
          </Button>
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}
```

### Accessibility

#### Interactive Cards

When making ContentCard interactive, wrap it in a `Pressable` component and handle accessibility carefully to avoid nested interactive elements.

**The Problem**: If you wrap ContentCard in a `Pressable` and also have interactive elements inside (like buttons), the card becomes a clickable container with nested interactive elements. This creates accessibility issues for screen reader users.

**The Solution**: Use `as="div"` on the Pressable wrapper and add a separate action button inside the card. This allows:

- Regular users to click anywhere on the card
- Screen reader users to navigate through card content and focus on individual interactive elements
- Keyboard users to tab to the action button

```jsx live
function AccessibleCard() {
  return (
    <Pressable
      as="div"
      background="bgAlternate"
      borderRadius={500}
      onClick={() => alert('Card clicked - navigating...')}
      width="fit-content"
    >
      <ContentCard maxWidth={375}>
        <ContentCardHeader
          subtitle="News"
          thumbnail={<RemoteImage alt="Ethereum" shape="circle" size="l" source={ethBackground} />}
          title="CoinDesk"
        />
        <ContentCardBody
          title="Accessible Interactive Card"
          description="Card with both card-level click and internal action button"
        />
        <ContentCardFooter alignItems="center">
          <Text as="span" color="fgMuted" font="legal">
            2 hours ago
          </Text>
          <Button
            compact
            variant="inverse"
            onClick={(event) => {
              event.stopPropagation();
              alert('Button clicked - navigating...');
            }}
          >
            View Details
          </Button>
        </ContentCardFooter>
      </ContentCard>
    </Pressable>
  );
}
```

**Key points:**

- Use `as="div"` on the Pressable to avoid rendering as a semantic button
- When using `as="div"`, the Pressable remains keyboard focusable. Set `tabIndex={-1}` to remove it from the tab order if needed
- Call `event.stopPropagation()` at the beginning of the event handler method passed into the `onClick` prop for action buttons. This will prevent two click events from firing if the user directly clicks the action button.

:::warning Avoid Nested Interactive Elements
When ContentCard is wrapped in an interactive Pressable, avoid placing too many interactive elements inside the card. Each interactive element should have a clear, distinct purpose. If the card has many actions, consider using a non-interactive card layout instead.
:::

#### Color Contrast

When customizing card backgrounds, ensure sufficient color contrast between text and background colors. Use tools like the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify your color combinations meet WCAG guidelines.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `as` | `symbol \| object \| style \| ComponentClass<any, any> \| FunctionComponent<any> \| title \| div \| a \| abbr \| address \| area \| 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 \| 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 \| path \| 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 \| ResponsiveValue<AspectRatio \| undefined>` | 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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | 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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | 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 | `-` | - |
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
| `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
| `elevation` | `0 \| 1 \| 2 \| ResponsiveValue<Elevation \| undefined>` | No | `-` | - |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexGrow \| undefined>` | No | `-` | - |
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexShrink \| undefined>` | No | `-` | - |
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
| `gap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Grid \| undefined>` | No | `-` | - |
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridArea \| undefined>` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| column \| dense \| row \| ResponsiveValue<GridAutoFlow \| undefined>` | No | `-` | - |
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumn \| undefined>` | No | `-` | - |
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnEnd \| undefined>` | No | `-` | - |
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnStart \| undefined>` | No | `-` | - |
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRow \| undefined>` | No | `-` | - |
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowEnd \| undefined>` | No | `-` | - |
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowStart \| undefined>` | No | `-` | - |
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplate \| undefined>` | No | `-` | - |
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplateAreas \| undefined>` | 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 \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
| `margin` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | 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 | `-` | - |
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<Opacity \| undefined>` | No | `-` | - |
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
| `padding` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingBottom` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingEnd` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingStart` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingTop` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingX` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `paddingY` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
| `ref` | `any` | No | `-` | - |
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
| `rowGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
| `style` | `CSSProperties` | No | `-` | - |
| `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<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Transform \| undefined>` | No | `-` | - |
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<ZIndex \| undefined>` | No | `-` | - |


