ContentCardFooter

@coinbase/cds-web@9.28.0

A footer component for ContentCard.

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

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• ContentCard

󰔂

Semantic HTML

ContentCardFooter renders as a <footer> element by default. You can override this using the as prop.

With Icon Counter Buttons

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardFooter>
        <IconCounterButton accessibilityLabel="Like" count={20} icon="heart" />
        <IconCounterButton accessibilityLabel="Comment" count={40} icon="comment" />
        <IconCounterButton accessibilityLabel="Share" count={32} icon="wireTransfer" />
      </ContentCardFooter>
    </VStack>
  );
}

With Image Group and Button

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardFooter>
        <RemoteImageGroup shape="circle" size={32}>
          <RemoteImage alt="Ethereum" src={assets.eth.imageUrl} />
          <RemoteImage alt="Bitcoin" src={assets.btc.imageUrl} />
          <RemoteImage alt="Polygon" src={assets.polygon.imageUrl} />
        </RemoteImageGroup>
        <Button compact variant="secondary">
          Share
        </Button>
      </ContentCardFooter>
    </VStack>
  );
}

With Text and Actions

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardFooter alignItems="center">
        <Text font="label2" color="fgMuted">
          Updated 2 hours ago
        </Text>
        <HStack gap={1}>
          <IconButton
            transparent
            accessibilityLabel="Bookmark"
            name="bookmark"
            variant="secondary"
          />
          <IconButton transparent accessibilityLabel="Share" name="share" variant="secondary" />
        </HStack>
      </ContentCardFooter>
    </VStack>
  );
}

Centered Content

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardFooter justifyContent="center">
        <Button compact variant="secondary">
          View All Assets
        </Button>
      </ContentCardFooter>
    </VStack>
  );
}