ContentCardHeader

@coinbase/cds-web@9.28.0

A header component for ContentCard.

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

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• ContentCard

󰔂

Semantic HTML

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

Basic Example

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardHeader
        thumbnail={<Avatar src={assets.eth.imageUrl} size="l" />}
        title="CoinDesk"
        subtitle="News・5 hrs"
        actions={
          <IconButton
            transparent
            accessibilityLabel="More options"
            name="more"
            variant="secondary"
          />
        }
      />
    </VStack>
  );
}

With Multiple Actions

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardHeader
        thumbnail={<Avatar src={assets.btc.imageUrl} size="l" />}
        title="Bitcoin News"
        subtitle="Markets・2 hrs"
        actions={
          <HStack gap={0}>
            <IconButton transparent accessibilityLabel="Bookmark" name="star" variant="secondary" />
            <IconButton
              transparent
              accessibilityLabel="More options"
              name="more"
              variant="secondary"
            />
          </HStack>
        }
      />
    </VStack>
  );
}

Without Thumbnail

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardHeader
        title="Market Update"
        subtitle="Posted 3 hours ago"
        actions={
          <IconButton transparent accessibilityLabel="Share" name="share" variant="secondary" />
        }
      />
    </VStack>
  );
}

Title Only

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
      <ContentCardHeader title="Simple Header" />
    </VStack>
  );
}