NudgeCard

@coinbase/cds-web@8.13.6

A card component designed to encourage users to take essential actions.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma

---

Related components

• Banner,
• UpsellCard,
• ContentCard

with Transparent Button

Use if the nudge card's purpose is to provide a gentle reminder or a secondary option. Transparent buttons are less intrusive and blends more seamlessly with the rest of the page.

Loading...

󰙡

Live Code

function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Earn more crypto',
      description: 'You’ve got unstaked crypto. Stake it now to earn more.',
      pictogram: 'key',
      action: 'Start earning',
      onActionPress: NoopFn,
      onDismissPress: NoopFn,
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <NudgeCard {...card} />
      ))}
    </HStack>
  );
}

Compact

Use when space is limited.

Loading...

󰙡

Live Code

function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Derivatives Trading',
      description: 'Derivative Exchange is available for all users',
      pictogram: 'derivativesNavigation',
      onActionPress: NoopFn,
      compact: true,
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <NudgeCard {...card} />
      ))}
    </HStack>
  );
}