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

## Import

```tsx
import { ContainedAssetCard } from '@coinbase/cds-mobile/cards/ContainedAssetCard'
```

## Examples

### Basic example

Most common Contained Asset Card. Use for showing individual cryptocurrency assets, balances, earnings, rewards etc.

```jsx
function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: '$4.15',
      description: (
        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
          &#x2197;73.37%
        </Text>
      ),
      subtitle: 'ETH',
      onPress: NoopFn,
      header: <RemoteImage source={assets.eth.imageUrl} width="32px" height="32px" />,
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <ContainedAssetCard {...card} />
      ))}
    </HStack>
  );
}
```

### Rectangle

Rectangle

```jsx
function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: '$309.43',
      description: (
        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
          &#x2197;3.37%
        </Text>
      ),
      subtitle: 'Bitcoin',
      onPress: NoopFn,
      header: <RemoteImage source={assets.btc.imageUrl} width="32px" height="32px" />,
      size: 'l',
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <ContainedAssetCard {...card} />
      ))}
    </HStack>
  );
}
```

### without Description

Use this variation when presenting balances.

```jsx
function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Oct 12',
      subtitle: 'Next pay day',
      onPress: NoopFn,
      header: (
        <Box bordered background="bgInverse" borderRadius={400} padding={1}>
          <Icon color="bg" name="calendar" size="s" />
        </Box>
      ),
    },
    {
      title: '+ $24.02',
      subtitle: 'Sept earnings',
      onPress: NoopFn,
      header: (
        <Box bordered background="bgInverse" borderRadius={400} padding={1}>
          <Icon active color="bg" name="chartBar" size="s" />
        </Box>
      ),
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <ContainedAssetCard {...card} />
      ))}
    </HStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Header to display Remote Image or other content. |
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children to be rendered in the card |
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
| `maxWidth` | `string \| number` | No | `-` | - |
| `minWidth` | `string \| number` | No | `-` | - |
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
| `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
| `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 |


