FloatingAssetCard

@coinbase/cds-web@8.34.1

A card component for displaying and managing asset holdings.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• ContentCard,
• ContainedAssetCard

---

󰏖

View as Markdown

Default

Most common composition for displaying individual assets like NFTs or dApps.

Loading...

󰙡

Live Code

function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Balancing the Air',
      description: '0.5 ETH',
      subtitle: 'Amber V’s Artwork',
      onClick: NoopFn,
      media: (
        <RemoteImage
          source="/img/nft.png"
          height={'100%'}
          style={{ objectFit: 'cover', cursor: 'pointer' }}
          width="100%"
        />
      ),
    },
  ];
  return (
    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={1}>
      {cards.map((card) => (
        <FloatingAssetCard {...card} />
      ))}
    </VStack>
  );
}

Descriptions as trends

Trends help users make decisions about whether or not to invest in an asset.

Loading...

󰙡

Live Code

function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: '#7560',
      description: (
        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
          &#x2197;6.37%
        </Text>
      ),
      subtitle: 'Bored Ape',
      onClick: NoopFn,
      media: (
        <RemoteImage
          source="/img/nft_boredape2.png"
          height={'100%'}
          style={{ objectFit: 'cover', cursor: 'pointer' }}
          width="100%"
        />
      ),
    },
    {
      title: '#2015',
      description: (
        <Text as="p" font="label2" color="fgNegative" numberOfLines={2}>
          &#x2198;6.37%
        </Text>
      ),
      subtitle: 'Pudgy Penguins',
      onClick: NoopFn,
      media: (
        <RemoteImage
          source="/img/nft_penguin.png"
          height={'100%'}
          style={{ objectFit: 'cover', cursor: 'pointer' }}
          width="100%"
        />
      ),
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <FloatingAssetCard {...card} />
      ))}
    </HStack>
  );
}

Description as ratings

Use this example for visual assets with ratings.

Loading...

󰙡

Live Code

function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Parallel',
      description: (
        <Text as="p" font="label2" color="fgMuted" numberOfLines={2}>
          &#9733;4.5
        </Text>
      ),
      onClick: NoopFn,
      media: (
        <RemoteImage
          source="/img/collection.png"
          height={'100%'}
          style={{ objectFit: 'cover', cursor: 'pointer' }}
          width="100%"
        />
      ),
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <FloatingAssetCard {...card} />
      ))}
    </HStack>
  );
}