@invisionag/iris-react-status-card v2.8.2

import StatusCard from '@invisionag/iris-react-status-card';
import { StatusCardGroup } from '@invisionag/iris-react-status-card';

General Props

icon

Can receive either a string or a react component. When passed a string, it will render the matching iris icon in the header. When passed a component, it will directly render the component instead.

Usage

<StatusCard icon="check circle" />
<StatusCard icon={() => <div>Custom Component</div>} />

footer

Can receive JSX and will render a footer section into the card. Can be used for content that is supposed to be aligned to the bottom of the card

Usage

<StatusCard footer={StatusCardProps => <div>My Footer</div>} />

Statuses

Organizes some content in a card layout, with the card being able to communicate different statuses.

success:

The condition is achieved, this card is supposed to confirm a correct status.

Usage:

<StatusCard success heading="It worked!" />

error:

The cards condition is not achieved. The card is interactable.

Usage:

<StatusCard hasError heading="This did not work!" />

active:

This cards condition is undetermined. User action is expected here. If combined with success or hasError, the status takes priority when computing styling.

Usage:

<StatusCard active heading="Click me!" />

disabled:

Its not possible to interact with this card. Whether status is success or error does not matter.

Usage:

<StatusCard disabled heading="I am disabled!" />

largeIcon

Doubles the size of the Icon. Should be used with large StatusCards.

Usage:

<StatusCard heading="I have a large icon!" largeIcon />

Content

StatusCards are comprised of heading, icon and children. heading expects any string, icon has to be a valid iris-react-icon value, and children may be any react node(s).

Group

The component also export StatusCardGroup, which is a flex-based wrapper for Cards. It also takes care of gutter-spacing for the cards it includes.

Usage:

<StatusCardGroup>
  <StatusCard heading="I'm a card!" />
  <StatusCard heading="I'm a card too!" />
</StatusCardGroup>