@coinbase/cds-mcp-server 8.40.2 → 8.42.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.42.0 ((2/4/2026, 01:51 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.41.0 ((2/4/2026, 09:22 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.40.2 ((2/2/2026, 11:25 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/Alert.txt

@@ -149,7 +149,7 @@ function AlertOnModalExample() {
 | `onDidClose` | `(() => void)` | No | `-` | Callback fired after the component is closed. |
 | `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
 | `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
-| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
+| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
 | `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
 | `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | 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 |

package/mcp-docs/mobile/components/Combobox.txt

@@ -133,6 +133,50 @@ function HelperTextExample() {
 }
 ```
 
+### Alignment
+
+The alignment of the selected value(s) can be adjusted using the `align` prop.
+
+::::note
+Left / right alignment is preferred for styling.
+::::
+
+```jsx
+function AlignmentExample() {
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+  ];
+
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana', 'cherry'] });
+
+  return (
+    <VStack gap={2}>
+      <Combobox
+        label="Default align - start"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search fruits..."
+        type="multi"
+        value={value}
+      />
+      <Combobox
+        align="end"
+        label="End align"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search fruits..."
+        type="multi"
+        value={value}
+      />
+    </VStack>
+  );
+}
+```
+
 ### Borderless
 
 You can remove the border from the combobox control by setting `bordered` to `false`.
@@ -201,6 +245,7 @@ function BorderlessExample() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `align` | `end \| start \| center` | No | `'start'` | Alignment of the value node. |
 | `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `closeButtonLabel` | `string` | No | `-` | Label for close button when combobox is open (mobile only) |

package/mcp-docs/mobile/components/ContainedAssetCard.txt

@@ -1,6 +1,6 @@
 # ContainedAssetCard
 
-Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings. They provide a clear visual and informative overview, simplifying asset management and investment considerations.
+Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings.
 
 ## Import
 

package/mcp-docs/mobile/components/ContentCard.txt

@@ -1,6 +1,6 @@
 # ContentCard
 
-A flexible card component for displaying content with header, body, and footer sections.
+A flexible, composable card component for displaying rich content with customizable header, body, and footer sections. Use with ContentCardHeader, ContentCardBody, and ContentCardFooter sub-components.
 
 ## Import
 
@@ -10,84 +10,125 @@ import { ContentCard } from '@coinbase/cds-mobile/cards/ContentCard'
 
 ## Examples
 
-### Text only
+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.
 
-These are our most basic Content Cards.
+### Basic Examples
+
+ContentCard uses sub-components for flexible layout. Combine `ContentCardHeader`, `ContentCardBody`, and `ContentCardFooter` to create your card structure.
 
 ```jsx
 function Example() {
   return (
-    <VStack bordered borderRadius="400" maxWidth={375}>
+    <VStack gap={2}>
       <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>
+          thumbnail={assets.eth.imageUrl}
+          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>
           }
-          title="Description"
         />
         <ContentCardBody
-          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
+          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" font="label2" color="fgMuted" numberOfLines={1}>
-                BTC
+              <Text color="fgMuted" font="label2" numberOfLines={1}>
+                $3,081.01
               </Text>
-              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
-                ↗ 5.12%
+              <Text color="fgPositive" font="label2">
+                ↗ 6.37%
               </Text>
             </HStack>
           }
         />
+        <ContentCardFooter>
+          <RemoteImageGroup shape="circle" size={32}>
+            <RemoteImage source={{ uri: assets.eth.imageUrl }} />
+            <RemoteImage source={{ uri: assets.polygon.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
+function Example() {
+  const exampleMedia = (
+    <RemoteImage
+      accessibilityLabel="Ethereum background"
+      source={{ uri: ethBackground }}
+      style={{ borderRadius: 24 }}
+      width="100%"
+    />
+  );
+
+  return (
+    <VStack gap={2}>
+      <Text font="headline">mediaPlacement: top (default)</Text>
       <ContentCard>
-        <ContentCardHeader
-          meta={
-            <Box marginLeft={-1}>
-              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
-                ・News・5 hrs
-              </Text>
-            </Box>
-          }
-          title="Brian Armstrong"
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} title="CoinDesk" subtitle="News" />
+        <ContentCardBody
+          title="Media at top"
+          description="The media appears above the text content."
+          media={exampleMedia}
+          mediaPlacement="top"
+        />
+      </ContentCard>
+
+      <Text font="headline">mediaPlacement: bottom</Text>
+      <ContentCard>
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} title="CoinDesk" subtitle="News" />
+        <ContentCardBody
+          title="Media at bottom"
+          description="The media appears below the text content."
+          media={exampleMedia}
+          mediaPlacement="bottom"
         />
+      </ContentCard>
+
+      <Text font="headline">mediaPlacement: end</Text>
+      <ContentCard>
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} title="CoinDesk" subtitle="News" />
         <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"
+          title="Media at end"
+          description="The media appears to the right of the text content."
+          media={exampleMedia}
+          mediaPlacement="end"
+        />
+      </ContentCard>
+
+      <Text font="headline">mediaPlacement: start</Text>
+      <ContentCard>
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} 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>
@@ -95,79 +136,110 @@ function Example() {
 }
 ```
 
-### Rewards Content Card
+### With Background
 
-This is an example of Content Cards being used for rewards.
+Apply a background color to the card using the `background` prop. When using a background, consider using `variant="tertiary"` on buttons.
 
 ```jsx
 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"
+  const exampleMedia = (
+    <RemoteImage
+      accessibilityLabel="Ethereum background"
+      source={{ uri: ethBackground }}
+      style={{ borderRadius: 24 }}
+      width="100%"
+    />
+  );
+
+  return (
+    <VStack gap={2}>
+      <ContentCard background="bgAlternate">
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} title="CoinDesk" subtitle="News" />
+        <ContentCardBody
+          title="Card with Background"
+          description="This card has an alternate background color."
+          media={exampleMedia}
         />
-        <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"
+        <ContentCardFooter>
+          <RemoteImageGroup shape="circle" size={32}>
+            <RemoteImage source={{ uri: assets.eth.imageUrl }} />
+            <RemoteImage source={{ uri: assets.polygon.imageUrl }} />
+          </RemoteImageGroup>
+          <Button compact variant="tertiary">
+            Share
+          </Button>
+        </ContentCardFooter>
+      </ContentCard>
+
+      <ContentCard background="bgAlternate">
+        <ContentCardHeader thumbnail={assets.eth.imageUrl} title="CoinDesk" subtitle="News" />
+        <ContentCardBody
+          title="No Media with Background"
+          description="This card has no media element."
         />
-      </g>
-      <defs>
-        <clipPath id="clip0_3440_332">
-          <rect fill="white" height="32" width="32" />
-        </clipPath>
-      </defs>
-    </svg>
+        <ContentCardFooter>
+          <HStack 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"
+            />
+          </HStack>
+        </ContentCardFooter>
+      </ContentCard>
+    </VStack>
   );
+}
+```
+
+### Rewards Card Example
+
+Example showing a rewards-style content card with claim button.
+
+```jsx
+function Example() {
   return (
-    <VStack bordered borderRadius="400" maxWidth={375}>
+    <VStack gap={2}>
       <ContentCard gap={3}>
         <ContentCardBody
-          body={
-            <Text as="p" font="body" paddingTop={0.5}>
+          title={
+            <Text font="body" style={{ paddingTop: 4 }}>
               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}>
+              <Text color="fgMuted" font="label2" numberOfLines={1}>
                 BTC
               </Text>
-              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              <Text color="fgPositive" font="label2">
                 ↗ 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',
-              }}
+            <RemoteImage
+              accessibilityLabel="Rewards banner"
+              source={{ uri: ethBackground }}
+              style={{ borderRadius: 24 }}
               width="100%"
             />
           }
         />
         <ContentCardFooter>
           <HStack alignItems="center" gap={1}>
-            <Box>{opIcon}</Box>
+            <Avatar src={assets.op.imageUrl} size="xl" />
             <VStack>
-              <TextLegal as="span" color="fgMuted">
+              <Text color="fgMuted" font="legal">
                 Reward
-              </TextLegal>
-              <Text as="span" font="headline">
-                +$15 ACS
               </Text>
+              <Text font="headline">+$15 ACS</Text>
             </VStack>
           </HStack>
           <Button compact accessibilityLabel="Claim now" variant="secondary">
@@ -180,92 +252,66 @@ function Example() {
 }
 ```
 
-### Custom
+### Accessibility
 
-Example of a content card with a tweet.
+#### 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 pressable container with nested interactive elements. This creates accessibility issues for VoiceOver users.
+
+**The Solution**: Use `accessible={false}` on the Pressable wrapper and add a separate action button inside the card. This allows:
+
+- Regular users to tap anywhere on the card
+- VoiceOver users to navigate through card content and focus on individual interactive elements
+- Switch Control users to activate the action button
 
 ```jsx
-function Example() {
-  const anotherContentCard = (
-    <ContentCard
+function AccessibleCard() {
+  return (
+    <Pressable
+      accessible={false}
       background="bgAlternate"
-      borderRadius="400"
-      paddingHorizontal={1.5}
-      paddingVertical={1.5}
+      borderRadius={500}
+      onPress={() => console.log('Card pressed - navigating...')}
     >
-      <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"
-            />
-          }
-        />
+      <ContentCard maxWidth={375}>
+        <ContentCardHeader subtitle="News" thumbnail={ethBackground} title="CoinDesk" />
         <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" />
+          title="Accessible Interactive Card"
+          description="Card with both card-level press and internal action button"
+        />
+        <ContentCardFooter alignItems="center">
+          <Text color="fgMuted" font="legal">
+            2 hours ago
+          </Text>
+          <Button
+            compact
+            variant="tertiary"
+            onPress={() => console.log('Button pressed - navigating...')}
+          >
+            View Details
+          </Button>
         </ContentCardFooter>
       </ContentCard>
-    </VStack>
+    </Pressable>
   );
 }
 ```
 
+**Key points:**
+
+- Use `accessible={false}` on the Pressable to remove it from the accessibility tree, allowing VoiceOver to focus on child elements individually
+- Add a `Button` in the footer that performs the same action as the card press for VoiceOver users
+
+:::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. WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text.
+
 ## Props
 
 | Prop | Type | Required | Default | Description |