ActivationCard

View source on GitHub

See recent changes on GitHub

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

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?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> \| React.KeyboardEvent<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.

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 BannerCallout instead.

Accessibility

Localization

Be sure to localize all text strings. Note that localization can lengthen text by 20 to 30 percent.

Note that dismissButton.accessibilityLabel is optional as DefaultLabelProvider provides default strings. Use custom labels if they need to be more specific.

ActivationCard depends on DefaultLabelProvider for internal text strings. Localize the texts via DefaultLabelProvider. Learn more

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

export default function Example() {
  return (
    <DefaultLabelProvider
      labels={{
        ActivationCard: {
          accessibilityDismissButtonLabel: 'Entlassen.',
        },
      }}
    >
      <Box
        alignItems="center"
        display="flex"
        height="100%"
        justifyContent="center"
        padding={8}
      >
        <ActivationCard
          dismissButton={{
            accessibilityLabel: 'Karte entlassen.',
            onDismiss: () => {},
          }}
          link={{
            href: 'https://pinterest.com',
            label: 'Erfahren Sie mehr',
            accessibilityLabel:
              'Erfahren Sie mehr über den Antragsstatus der Website.',
          }}
          message="Wir werden Sie per E-Mail benachrichtigen, sobald Ihre Website erfolgreich angemeldet wurde."
          status="pending"
          statusMessage="Anhängig"
          title="Beanspruchen Sie Ihre Website"
        />
      </Box>
    </DefaultLabelProvider>
  );
}

Variants

Not Started

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

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <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