ActivationCard

ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

Figma:

Partially ready

Responsive:

Ready

Adaptive:

N/A

A11y:

Ready

Props

Component props
Name	Type	Default
`message` Required	`string`	-
	Text to render inside the activation card to convey detailed information to the user. The message text has a fixed size.
`status` Required	`"notStarted" \| "pending" \| "needsAttention" \| "complete"`	-
	Select the activation card status: `notStarted`: A task that has not be started `pending`: A task that is pending action `needsAttention`: A task that requires the user's attention `complete`: A task that has been completed
`statusMessage` Required	`string`	-
	A message to indicate the current status of the activation card.
`title` Required	`string`	-
	Heading to render inside the activation card above the message to convey the activation card topic to the user.
`dismissButton`	`{\| accessibilityLabel: string, onDismiss: () => void, \|}`	-
	Callback fired when the dismiss button is clicked (pressed and released) with a mouse or keyboard. Supply a short, descriptive label for screen-readers to provide sufficient context about the dismiss button action. IconButtons do not render text for screen readers to read requiring an accessibility label. Accessibility: `accessibilityLabel` populates aria-label.
`link`	`{\| accessibilityLabel: string, href: string, label: string, onClick?: ({\| event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void, rel?: "none" \| "nofollow", target?: null \| "self" \| "blank", \|}`	-
	Link-role button to render inside the activation card as a call-to-action to the user. `label`: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size. `accessibilityLabel`: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text. `onClick`: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard. ActivationCard can be paired with GlobalEventsHandlerProvider. See GlobalEventsHandlerProvider to learn more about link navigation.

Accessibility

Ready

Usage guidelines

When to use

Use in groups to describe the user's stage in a sequential path toward an overall action.

When not to use

As a single element communicating updates to the state or status of the surface. Use Callout instead.

Variants

Not Started

import { ActivationCard, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex>
        <ActivationCard
          dismissButton={{
            accessibilityLabel: 'Dismiss card',
            onDismiss: () => {},
          }}
          link={{
            href: 'https://pinterest.com',
            label: 'Claim your website now',
            accessibilityLabel: '',
          }}
          message="Grow distribution and track Pins linked to your website"
          status="notStarted"
          statusMessage="Not started"
          title="Claim your website"
        />
      </Flex>
    </Box>
  );
}

Pending

import { ActivationCard, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex>
        <ActivationCard
          dismissButton={{
            accessibilityLabel: 'Dismiss card',
            onDismiss: () => {},
          }}
          link={{
            href: 'https://pinterest.com',
            label: 'Learn more',
            accessibilityLabel: 'Learn more: website claim status',
          }}
          message="We will notify you via email as soon as your site has been successfully claimed."
          status="pending"
          statusMessage="Pending"
          title="Claim your website"
        />
      </Flex>
    </Box>
  );
}

Needs Attention

import { ActivationCard, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex>
        <ActivationCard
          dismissButton={{
            accessibilityLabel: 'Dismiss card',
            onDismiss: () => {},
          }}
          link={{
            accessibilityLabel: 'Learn more about tag health',
            href: 'https://pinterest.com',
            label: 'Learn more',
          }}
          message="Oops! Your tag must be healthy to continue."
          status="needsAttention"
          statusMessage="Needs attention"
          title="Tag is unhealthy"
        />
      </Flex>
    </Box>
  );
}

Complete

import { ActivationCard, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Flex>
        <ActivationCard
          message="Tag is installed and healthy"
          status="complete"
          statusMessage="Completed"
          title="Nice work"
        />
      </Flex>
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Partially ready	Component is live in Figma, however may not be available for all platforms.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub

; Opens a new tab