# ContentCard

A flexible card component for displaying content.

## Import

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

## Examples

### Text only

These are our most basic Content Cards.

```jsx live
function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375}>
      <ContentCard>
        <ContentCardHeader
          end={
            <IconButton
              transparent
              accessibilityLabel="More information about coinDesk card news"
              name="more"
              variant="secondary"
            />
          }
          meta={
            <Box marginLeft={-1}>
              <Text as="span" font="label2" color="fgMuted" marginLeft={-1} numberOfLines={1}>
                ・News・5 hrs
              </Text>
            </Box>
          }
          title="Description"
        />
        <ContentCardBody
          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                BTC
              </Text>
              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </Text>
            </HStack>
          }
        />
      </ContentCard>
      <ContentCard>
        <ContentCardHeader
          meta={
            <Box marginLeft={-1}>
              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                ・News・5 hrs
              </Text>
            </Box>
          }
          title="Brian Armstrong"
        />
        <ContentCardBody
          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                BTC
              </Text>
              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </Text>
            </HStack>
          }
          media={
            <img
              alt=""
              aria-hidden="true"
              src="/img/card/content_card_basic.png"
              style={{
                objectFit: 'cover',
                cursor: 'pointer',
                borderRadius: '24px',
              }}
              width="100%"
            />
          }
          mediaPosition="right"
        />
      </ContentCard>
    </VStack>
  );
}
```

### Rewards Content Card

This is an example of Content Cards being used for rewards.

```jsx live
function Example() {
  const opIcon = (
    <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
      <g clipPath="url(#clip0_3440_332)">
        <circle cx="16" cy="16" fill="#FF0420" r="16" />
        <path
          clipRule="evenodd"
          d="M7.05376 20.238C7.76564 20.7575 8.6789 21.0172 9.79355 21.0172C11.1424 21.0172 12.2195 20.7064 13.0251 20.085C13.8306 19.4543 14.3973 18.5036 14.7252 17.2329C14.9219 16.4538 15.0904 15.6515 15.231 14.826C15.2778 14.5292 15.3012 14.2834 15.3012 14.0886C15.3012 13.4394 15.1373 12.8829 14.8095 12.4191C14.4816 11.9461 14.032 11.5936 13.4606 11.3617C12.8893 11.1206 12.243 11 11.5217 11C8.87092 11 7.22705 12.2753 6.59011 14.826C6.3653 15.7628 6.19202 16.5651 6.07025 17.2329C6.02342 17.5297 6 17.7801 6 17.9842C6 18.9581 6.35125 19.7094 7.05376 20.238ZM11.325 18.5546C10.9597 18.8607 10.5148 19.0137 9.99025 19.0137C9.09104 19.0137 8.64143 18.5871 8.64143 17.7337C8.64143 17.5297 8.66016 17.3349 8.69763 17.1494C8.86624 16.2498 9.03483 15.4892 9.20344 14.8677C9.36267 14.237 9.62494 13.7686 9.99025 13.4626C10.3649 13.1565 10.8145 13.0034 11.3391 13.0034C12.2289 13.0034 12.6738 13.4255 12.6738 14.2695C12.6738 14.4735 12.6551 14.673 12.6176 14.8677C12.5052 15.517 12.3413 16.2776 12.1259 17.1494C11.9666 17.7801 11.6997 18.2485 11.325 18.5546Z"
          fill="white"
          fillRule="evenodd"
        />
        <path
          clipRule="evenodd"
          d="M16.488 20.7807C16.5442 20.8456 16.6238 20.878 16.7269 20.878H18.6377C18.7314 20.878 18.8203 20.8456 18.9046 20.7807C18.9889 20.7157 19.0405 20.6323 19.0592 20.5302L19.7055 17.4833H21.6023C22.8293 17.4833 23.7941 17.2283 24.4966 16.7182C25.2085 16.208 25.6815 15.4196 25.9157 14.353C25.9719 14.1025 26 13.8614 26 13.6295C26 12.8226 25.6815 12.2058 25.0446 11.7791C24.417 11.3525 23.5834 11.1391 22.5436 11.1391H18.8063C18.7127 11.1391 18.6236 11.1716 18.5394 11.2365C18.4551 11.3014 18.4035 11.3849 18.3848 11.4869L16.4459 20.5302C16.4271 20.623 16.4412 20.7064 16.488 20.7807ZM22.7263 15.2434C22.4359 15.4567 22.0941 15.5634 21.7006 15.5634H20.0849L20.6188 13.073H22.3048C22.6888 13.073 22.9605 13.1472 23.1197 13.2956C23.2789 13.4347 23.3586 13.6388 23.3586 13.9078C23.3586 14.0283 23.3445 14.1675 23.3164 14.3251C23.2227 14.724 23.026 15.0301 22.7263 15.2434Z"
          fill="white"
          fillRule="evenodd"
        />
      </g>
      <defs>
        <clipPath id="clip0_3440_332">
          <rect fill="white" height="32" width="32" />
        </clipPath>
      </defs>
    </svg>
  );
  return (
    <VStack bordered borderRadius="400" maxWidth={375}>
      <ContentCard gap={3}>
        <ContentCardBody
          body={
            <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" font="label2" color="fgMuted" numberOfLines={1}>
                BTC
              </Text>
              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </Text>
            </HStack>
          }
          media={
            <img
              alt=""
              aria-hidden="true"
              src="/img/components/card/content_card_rewards.png"
              style={{
                objectFit: 'cover',
                cursor: 'pointer',
                borderRadius: '24px',
              }}
              width="100%"
            />
          }
        />
        <ContentCardFooter>
          <HStack alignItems="center" gap={1}>
            <Box>{opIcon}</Box>
            <VStack>
              <TextLegal as="span" color="fgMuted">
                Reward
              </TextLegal>
              <Text as="span" font="headline">
                +$15 ACS
              </Text>
            </VStack>
          </HStack>
          <Button compact accessibilityLabel="Claim now" variant="secondary">
            Claim Now
          </Button>
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}
```

### Custom

Example of a content card with a tweet.

```jsx live
function Example() {
  const anotherContentCard = (
    <ContentCard
      background="bgAlternate"
      borderRadius="400"
      paddingHorizontal={1.5}
      paddingVertical={1.5}
    >
      <ContentCardHeader
        avatar={
          <Avatar
            alt="Mat Dryhurst"
            name="Mat Dryhurst"
            shape="circle"
            size="s"
            src="/img/card/content_card_custom_avatar_2.png"
          />
        }
        meta={
          <Box marginLeft={-1}>
            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
              @matdryhurst・7 mo
            </Text>
          </Box>
        }
        title="Mat Dryhurst"
      />
      <ContentCardBody body="A bunch of massive youtubers are quitting, citing exhuastion and an algorithm that punishes a variety of output." />
    </ContentCard>
  );
  return (
    <VStack alignItems="center" maxWidth={375} bordered borderRadius={400}>
      <ContentCard>
        <ContentCardHeader
          avatar="/img/card/content_card_custom_avatar_1.png"
          meta={
            <Box marginLeft={-1}>
              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                ・News・5 hrs
              </Text>
            </Box>
          }
          title="Description"
          end={
            <IconButton
              transparent
              accessibilityLabel="More information about coinDesk card news"
              name="more"
              variant="secondary"
            />
          }
        />
        <ContentCardBody
          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
          gap={1.5}
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                BTC
              </Text>
              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </Text>
            </HStack>
          }
          paddingBottom={3}
          paddingStart={5}
        >
          {anotherContentCard}
        </ContentCardBody>
        <ContentCardFooter>
          <IconCounterButton count={20} icon="heart" />
          <IconCounterButton count={40} icon="comment" />
          <IconCounterButton count={32} icon="wireTransfer" />
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `about` | `string \| undefined` | No | `-` | - |
| `accessKey` | `string \| undefined` | No | `-` | - |
| `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 | `-` | - |
| `aria-activedescendant` | `string \| undefined` | No | `-` | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| `aria-atomic` | `Booleanish \| undefined` | No | `-` | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| `aria-autocomplete` | `none \| list \| inline \| both \| undefined` | No | `-` | Indicates whether inputting text could trigger display of one or more predictions of the users intended value for an input and specifies how predictions would be presented if they are made. |
| `aria-braillelabel` | `string \| undefined` | No | `-` | Defines a string value that labels the current element, which is intended to be converted into Braille. |
| `aria-brailleroledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. |
| `aria-busy` | `Booleanish \| undefined` | No | `-` | - |
| `aria-checked` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current checked state of checkboxes, radio buttons, and other widgets. |
| `aria-colcount` | `number \| undefined` | No | `-` | Defines the total number of columns in a table, grid, or treegrid. |
| `aria-colindex` | `number \| undefined` | No | `-` | Defines an elements column index or position with respect to the total number of columns within a table, grid, or treegrid. |
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-current` | `boolean \| true \| false \| page \| step \| location \| date \| time \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
| `aria-disabled` | `Booleanish \| undefined` | No | `-` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
| `aria-dropeffect` | `none \| link \| copy \| execute \| move \| popup \| undefined` | No | `-` | Indicates what functions can be performed when a dragged object is released on the drop target. |
| `aria-errormessage` | `string \| undefined` | No | `-` | Identifies the element that provides an error message for the object. |
| `aria-expanded` | `Booleanish \| undefined` | No | `-` | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-flowto` | `string \| undefined` | No | `-` | Identifies the next element (or elements) in an alternate reading order of content which, at the users discretion, allows assistive technology to override the general default of reading in document source order. |
| `aria-grabbed` | `Booleanish \| undefined` | No | `-` | Indicates an elements grabbed state in a drag-and-drop operation. |
| `aria-haspopup` | `boolean \| true \| false \| dialog \| grid \| listbox \| menu \| tree \| undefined` | No | `-` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-hidden` | `Booleanish \| undefined` | No | `-` | Indicates whether the element is exposed to an accessibility API. |
| `aria-invalid` | `boolean \| true \| false \| grammar \| spelling \| undefined` | No | `-` | Indicates the entered value does not conform to the format expected by the application. |
| `aria-keyshortcuts` | `string \| undefined` | No | `-` | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| `aria-label` | `string \| undefined` | No | `-` | Defines a string value that labels the current element. |
| `aria-labelledby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that labels the current element. |
| `aria-level` | `number \| undefined` | No | `-` | Defines the hierarchical level of an element within a structure. |
| `aria-live` | `off \| assertive \| polite \| undefined` | No | `-` | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| `aria-modal` | `Booleanish \| undefined` | No | `-` | Indicates whether an element is modal when displayed. |
| `aria-multiline` | `Booleanish \| undefined` | No | `-` | Indicates whether a text box accepts multiple lines of input or only a single line. |
| `aria-multiselectable` | `Booleanish \| undefined` | No | `-` | Indicates that the user may select more than one item from the current selectable descendants. |
| `aria-orientation` | `horizontal \| vertical \| undefined` | No | `-` | Indicates whether the elements orientation is horizontal, vertical, or unknown/ambiguous. |
| `aria-owns` | `string \| undefined` | No | `-` | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
| `aria-placeholder` | `string \| undefined` | No | `-` | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
| `aria-posinset` | `number \| undefined` | No | `-` | Defines an elements number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
| `aria-pressed` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current pressed state of toggle buttons. |
| `aria-readonly` | `Booleanish \| undefined` | No | `-` | Indicates that the element is not editable, but is otherwise operable. |
| `aria-relevant` | `text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals \| undefined` | No | `-` | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. |
| `aria-required` | `Booleanish \| undefined` | No | `-` | Indicates that user input is required on the element before a form may be submitted. |
| `aria-roledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized description for the role of an element. |
| `aria-rowcount` | `number \| undefined` | No | `-` | Defines the total number of rows in a table, grid, or treegrid. |
| `aria-rowindex` | `number \| undefined` | No | `-` | Defines an elements row index or position with respect to the total number of rows within a table, grid, or treegrid. |
| `aria-rowindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-rowindex. |
| `aria-rowspan` | `number \| undefined` | No | `-` | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. |
| `aria-selected` | `Booleanish \| undefined` | No | `-` | Indicates the current selected state of various widgets. |
| `aria-setsize` | `number \| undefined` | No | `-` | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
| `aria-sort` | `none \| ascending \| descending \| other \| undefined` | No | `-` | Indicates if items in a table or grid are sorted in ascending or descending order. |
| `aria-valuemax` | `number \| undefined` | No | `-` | Defines the maximum allowed value for a range widget. |
| `aria-valuemin` | `number \| undefined` | No | `-` | Defines the minimum allowed value for a range widget. |
| `aria-valuenow` | `number \| undefined` | No | `-` | Defines the current value for a range widget. |
| `aria-valuetext` | `string \| undefined` | No | `-` | Defines the human readable text alternative of aria-valuenow for a range widget. |
| `as` | `symbol \| object \| style \| 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 \| 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 \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `div` | 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` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `autoCapitalize` | `off \| none \| on \| sentences \| words \| characters \| (string & {}) \| undefined` | No | `-` | - |
| `autoCorrect` | `string \| undefined` | No | `-` | - |
| `autoFocus` | `boolean \| undefined` | No | `-` | - |
| `autoSave` | `string \| 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` | No | `-` | - |
| `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 | `-` | - |
| `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 | `-` | - |
| `className` | `string \| 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 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `content` | `string \| undefined` | No | `-` | - |
| `contentEditable` | `Booleanish \| inherit \| plaintext-only \| undefined` | No | `-` | - |
| `contextMenu` | `string \| undefined` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `dangerouslySetInnerHTML` | `{ __html: string \| TrustedHTML; } \| undefined` | No | `-` | - |
| `datatype` | `string \| undefined` | No | `-` | - |
| `defaultChecked` | `boolean \| undefined` | No | `-` | - |
| `defaultValue` | `string \| number \| readonly string[] \| undefined` | No | `-` | - |
| `dir` | `string \| undefined` | No | `-` | - |
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
| `draggable` | `Booleanish \| undefined` | No | `-` | - |
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
| `enterKeyHint` | `enter \| done \| go \| next \| previous \| search \| send \| undefined` | No | `-` | - |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | 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 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
| `hidden` | `boolean \| undefined` | No | `-` | - |
| `id` | `string \| undefined` | No | `-` | - |
| `inlist` | `any` | No | `-` | - |
| `inputMode` | `none \| search \| text \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
| `itemID` | `string \| undefined` | No | `-` | - |
| `itemProp` | `string \| undefined` | No | `-` | - |
| `itemRef` | `string \| undefined` | No | `-` | - |
| `itemScope` | `boolean \| undefined` | No | `-` | - |
| `itemType` | `string \| undefined` | No | `-` | - |
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `key` | `Key \| null \| undefined` | No | `-` | - |
| `lang` | `string \| undefined` | No | `-` | - |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -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 | `-` | - |
| `nonce` | `string \| undefined` | No | `-` | - |
| `onAbort` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAbortCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBeforeInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBeforeInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBlur` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBlurCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayThrough` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayThroughCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onChange` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onChangeCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionEnd` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionEndCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionStart` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionStartCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionUpdateCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCopy` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCopyCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCut` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCutCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDrag` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnd` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEndCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnter` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnterCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragExit` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragExitCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragLeave` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragLeaveCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragOver` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragOverCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragStart` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragStartCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDrop` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDropCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDurationChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDurationChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEmptied` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEmptiedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEncrypted` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEncryptedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEnded` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEndedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onError` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onErrorCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onFocus` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onFocusCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInvalid` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInvalidCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyDown` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyDownCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyPress` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyPressCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyUp` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyUpCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoad` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadStart` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadStartCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedData` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedDataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedMetadata` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedMetadataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseLeave` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPaste` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPasteCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPause` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPauseCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlaying` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlayingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerLeave` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onProgress` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onProgressCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onRateChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onRateChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onReset` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResetCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResize` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResizeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onScroll` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onScrollCapture` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeeked` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeekedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeeking` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeekingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSelect` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSelectCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onStalled` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onStalledCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSubmit` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSubmitCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSuspend` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSuspendCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTimeUpdate` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTimeUpdateCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onVolumeChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onVolumeChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWaiting` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWaitingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWheel` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWheelCapture` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
| `prefix` | `string \| undefined` | No | `-` | - |
| `property` | `string \| undefined` | No | `-` | - |
| `radioGroup` | `string \| undefined` | No | `-` | - |
| `ref` | `any` | No | `-` | - |
| `rel` | `string \| undefined` | No | `-` | - |
| `resource` | `string \| undefined` | No | `-` | - |
| `results` | `number \| undefined` | No | `-` | - |
| `rev` | `string \| undefined` | No | `-` | - |
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
| `role` | `AriaRole \| undefined` | No | `-` | - |
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `security` | `string \| undefined` | No | `-` | - |
| `slot` | `string \| undefined` | No | `-` | - |
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
| `style` | `CSSProperties` | No | `-` | - |
| `suppressContentEditableWarning` | `boolean \| undefined` | No | `-` | - |
| `suppressHydrationWarning` | `boolean \| undefined` | No | `-` | - |
| `tabIndex` | `number \| undefined` | 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 | `-` | - |
| `title` | `string \| undefined` | No | `-` | - |
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `translate` | `yes \| no \| undefined` | No | `-` | - |
| `typeof` | `string \| undefined` | No | `-` | - |
| `unselectable` | `off \| on \| undefined` | No | `-` | - |
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
| `vocab` | `string \| undefined` | No | `-` | - |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |


