Skip to main content
ContentCard
@coinbase/cds-web@8.13.6
A flexible card component for displaying content.
Import
import { ContentCard } from '@coinbase/cds-web/cards/ContentCard'
SourceView source codeStorybookView StorybookFigmaView Figma
Related components

Text only​

These are our most basic Content Cards.

Loading...
Live Code
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}>
              <TextLabel2 as="span" color="fgMuted" marginLeft={-1} numberOfLines={1}>
                ・News・5 hrs
              </TextLabel2>
            </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}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </HStack>
          }
        />
      </ContentCard>
      <ContentCard>
        <ContentCardHeader
          meta={
            <Box marginLeft={-1}>
              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
                ・News・5 hrs
              </TextLabel2>
            </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}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </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.

Loading...
Live Code
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={
            <TextBody as="p" paddingTop={0.5}>
              Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s
            </TextBody>
          }
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </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>
              <TextHeadline as="span">+$15 ACS</TextHeadline>
            </VStack>
          </HStack>
          <Button compact accessibilityLabel="Claim now" variant="secondary">
            Claim Now
          </Button>
        </ContentCardFooter>
      </ContentCard>
    </VStack>
  );
}

Custom​

Example of a content card with a tweet.

Loading...
Live Code
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}>
            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
              @matdryhurst・7 mo
            </TextLabel2>
          </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}>
              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
                ・News・5 hrs
              </TextLabel2>
            </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}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </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>
  );
}

Is this page useful?

Coinbase Design is an open-source, adaptable system of guidelines, components, and tools that aid the best practices of user interface design for crypto products.
StorybookGithubBlogCareers