Fuegokit React ships with several ready-to-use card variants that you can include in common grid layouts on Getting Started screens.

Each can be rendered in a responsive grid, and each features polymorphic behavior that allows developers to render the card as the appropriate semantic element (as a li with the grid rendered as an ul, for example.)

For specific props tables, explore each component's props in Storybook.

Import

import {ButtonCard, ListCard, CoreFeaturesCard, AdminFeaturesCard, SurfaceCard}

Typescript support

Fuegokit React ships with Typescript support and to access the types for each card and its accompanying action, import them with the component:

import {AdminFeaturesCard, AdminFeaturesCardGrid, AdminFeaturesCardAction, SectionHeader} from '@fuegokit/react'

Admin Features Card

<AdminFeaturesCard
  action={{
    label: 'Go to configuration',
    tracking: {
      destination: 'jmwe:configuration',
      type: 'link'
    },
    type: 'ADDON',
    url: 'configuration'
  }}
  caption="Configure notifications, auto-refresh issues, showing transitions activity on the issue view, and more."
  title="Global Configuration"
/>

<AdminFeaturesCard
  action={{
    label: 'Go to configuration',
    tracking: {
      destination: 'jmwe:configuration',
      type: 'link'
    },
    type: 'ADDON',
    url: 'configuration'
  }}
  caption="Configure notifications, auto-refresh issues, showing transitions activity on the issue view, and more."
  title="Global Configuration"
/>

Surface Card

Surface Card renders a list item or other semantically appropriate card item that has a clickable surface, while maintaining semantic html structure and accessibility features for users of assistive technologies should be provided affordancesthat ensure that the card and content are usable and inclusive.

Typically used in a grid of 4, available with or without border and can be raised by default with the raised prop.

<SurfaceCardGrid>
  <SurfaceCard
    headline="Tutorial"
    title="Auto-create issue and assign to  team lead from support requests"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Automatically mark all issues as done"
    content="Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at interdum iac."
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Create multiple subtasks for specific issue type"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Check whether a specific issue has a specific status"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
</SurfaceCardGrid>

<SurfaceCardGrid>
  <SurfaceCard
    headline="Tutorial"
    title="Auto-create issue and assign to  team lead from support requests"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Automatically mark all issues as done"
    content="Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at interdum iac."
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Create multiple subtasks for specific issue type"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
  <SurfaceCard
    headline="Tutorial"
    title="Check whether a specific issue has a specific status"
    url="https://appfire.com"
    label="Start tutorial"
    raised={false}
    hasTopBorder={true}
  />
</SurfaceCardGrid>

Use Case Card

<UseCaseCardGrid>
    <UseCaseCard
      title="Close parent issue when all subtasks are Done"
      url=""
      label="Learn more"
      content={<img src="http://placekitten.com/g/250/200/" alt="kitty" />}
      raised
      hasTopBorder
      productCategory="appfire"
    />
    <UseCaseCard
      title="Add comment when issue moves to In Review"
      url=""
      label="Learn more"
      content={<img src="http://placekitten.com/g/250/200/" alt="kitty" />}
      raised
      hasTopBorder
      productCategory="appfire"
    />
  </UseCaseCardGrid>

<UseCaseCardGrid>
    <UseCaseCard
      title="Close parent issue when all subtasks are Done"
      url=""
      label="Learn more"
      content={<img src="http://placekitten.com/g/250/200/" alt="kitty" />}
      raised
      hasTopBorder
      productCategory="appfire"
    />
    <UseCaseCard
      title="Add comment when issue moves to In Review"
      url=""
      label="Learn more"
      content={<img src="http://placekitten.com/g/250/200/" alt="kitty" />}
      raised
      hasTopBorder
      productCategory="appfire"
    />
  </UseCaseCardGrid>

Core Features Card

Core Features Card provides links that give users actions to take.

Those actions can be internal, external, or addon actions.

<CoreFeaturesCard
  actionHandler={() => {
    alert('action handler here')
  }}
  caption="Sometimes a time-based automation is the best solution when an action needs to be triggered regularly, without a corresponding transition, like sending a daily email to a specific user. Scheduled Actions trigger JMWE post functions to run against issues returned by a JQL search."
  imgAlt=""
  imgUrl="https://mwec-test-mq.herokuapp.com/images/card-img-2.svg"
  primaryAction={{
    label: 'View schedules',
    tracking: {
      destination: 'documentation:workflow',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  secondaryAction={{
    label: 'JMWE scheduled action documentation',
    tracking: {
      destination: 'documentation:schedules',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  title="Schedules"
/>

<CoreFeaturesCard
  actionHandler={() => {
    alert('action handler here')
  }}
  caption="Sometimes a time-based automation is the best solution when an action needs to be triggered regularly, without a corresponding transition, like sending a daily email to a specific user. Scheduled Actions trigger JMWE post functions to run against issues returned by a JQL search."
  imgAlt=""
  imgUrl="https://mwec-test-mq.herokuapp.com/images/card-img-2.svg"
  primaryAction={{
    label: 'View schedules',
    tracking: {
      destination: 'documentation:workflow',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  secondaryAction={{
    label: 'JMWE scheduled action documentation',
    tracking: {
      destination: 'documentation:schedules',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  title="Schedules"
/>

Button Card

<ButtonCard
  actionHandler={() => {
    alert('action handler here')
  }}
  caption="Once your Jira automation is built out beyond a handful of workflows and events, Shared Actions enable you to reuse key components without starting from scratch. From post functions to events, these sequences save you countless hours and aggravation with a single spot to make configuration updates and apply globally."
  primaryAction={{
    label: 'View shared actions',
    tracking: {
      destination: 'jmwe:shared-actions',
      type: 'link'
    },
    type: 'ADDON',
    url: 'shared-actions'
  }}
  secondaryAction={{
    label: 'JMWE shared action documentation',
    tracking: {
      destination: 'documentation:sharedactions',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  title="Shared Actions"
/>

<ButtonCard
  actionHandler={() => {
    alert('action handler here')
  }}
  caption="Once your Jira automation is built out beyond a handful of workflows and events, Shared Actions enable you to reuse key components without starting from scratch. From post functions to events, these sequences save you countless hours and aggravation with a single spot to make configuration updates and apply globally."
  primaryAction={{
    label: 'View shared actions',
    tracking: {
      destination: 'jmwe:shared-actions',
      type: 'link'
    },
    type: 'ADDON',
    url: 'shared-actions'
  }}
  secondaryAction={{
    label: 'JMWE shared action documentation',
    tracking: {
      destination: 'documentation:sharedactions',
      type: 'link'
    },
    type: 'EXTERNAL',
    url: 'https://appfire.com'
  }}
  title="Shared Actions"
/>

List Card

<ListCard
  caption="JMWE provides a variety of scripting options to customize your automations:"
  listItems={[
    {
      description:
        'is used to configure post functions, in workflow transitions, Event-based Actions, or Scheduled Actions.',
      itemDocsAction: {
        label: 'Learn how to work with Nunjucks',
        tracking: {
          destination: 'documentation:nunjucks',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/j4CzBQ'
      },
      itemPrimaryAction: {
        label: 'Nunjucks tester',
        tracking: {
          destination: 'nunjucks-tester',
          type: 'link'
        },
        type: 'ADDON',
        url: 'nunjucks-tester'
      },
      label: 'Nunjucks'
    },
    {
      description: 'are used in workflow conditions and validators',
      itemDocsAction: {
        label: 'Jira Expressions',
        tracking: {
          destination: 'documentation:jira-expressions',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/TgAMP'
      },
      itemPrimaryAction: '[Circular]',
      label: 'Jira expressions'
    },
    {
      description: 'are used to share Nunjucks code between multiple post functions',
      itemDocsAction: {
        label: 'Shared Nunjucks templates',
        tracking: {
          destination: 'documentation:shared-nunjucks-templates',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/CgC2Cw'
      },
      itemPrimaryAction: {
        label: 'Shared nunjucks template library',
        tracking: {
          destination: 'nunjucks-templates',
          type: 'link'
        },
        type: 'ADDON',
        url: 'nunjucks-templates'
      },
      label: 'Shared Nunjucks templates'
    }
  ]}
  title="Scripting"
/>

<ListCard
  caption="JMWE provides a variety of scripting options to customize your automations:"
  listItems={[
    {
      description:
        'is used to configure post functions, in workflow transitions, Event-based Actions, or Scheduled Actions.',
      itemDocsAction: {
        label: 'Learn how to work with Nunjucks',
        tracking: {
          destination: 'documentation:nunjucks',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/j4CzBQ'
      },
      itemPrimaryAction: {
        label: 'Nunjucks tester',
        tracking: {
          destination: 'nunjucks-tester',
          type: 'link'
        },
        type: 'ADDON',
        url: 'nunjucks-tester'
      },
      label: 'Nunjucks'
    },
    {
      description: 'are used in workflow conditions and validators',
      itemDocsAction: {
        label: 'Jira Expressions',
        tracking: {
          destination: 'documentation:jira-expressions',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/TgAMP'
      },
      itemPrimaryAction: '[Circular]',
      label: 'Jira expressions'
    },
    {
      description: 'are used to share Nunjucks code between multiple post functions',
      itemDocsAction: {
        label: 'Shared Nunjucks templates',
        tracking: {
          destination: 'documentation:shared-nunjucks-templates',
          type: 'link'
        },
        type: 'EXTERNAL',
        url: 'https://innovalog.atlassian.net/wiki/x/CgC2Cw'
      },
      itemPrimaryAction: {
        label: 'Shared nunjucks template library',
        tracking: {
          destination: 'nunjucks-templates',
          type: 'link'
        },
        type: 'ADDON',
        url: 'nunjucks-templates'
      },
      label: 'Shared Nunjucks templates'
    }
  ]}
  title="Scripting"
/>

<FooterCard
  actionHandler={() => {
    alert('action handler')
  }}
  actions={[
    {
      label: 'Troubleshooting',
      tracking: {
        destination: 'documentation:troubleshooting',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'System status',
      tracking: {
        destination: 'statuspage',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'User guide',
      tracking: {
        destination: 'documentation:root',
        type: 'button'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'Admin guide',
      tracking: {
        destination: 'documentation:admin',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'Support request',
      tracking: {
        destination: 'support:raise-request',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    }
  ]}
  caption="Check out these resources for additional information:"
  title="Product resources and support"
/>

<FooterCard
  actionHandler={() => {
    alert('action handler')
  }}
  actions={[
    {
      label: 'Troubleshooting',
      tracking: {
        destination: 'documentation:troubleshooting',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'System status',
      tracking: {
        destination: 'statuspage',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'User guide',
      tracking: {
        destination: 'documentation:root',
        type: 'button'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'Admin guide',
      tracking: {
        destination: 'documentation:admin',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    },
    {
      label: 'Support request',
      tracking: {
        destination: 'support:raise-request',
        type: 'link'
      },
      type: 'EXTERNAL',
      url: 'https://appfire.com'
    }
  ]}
  caption="Check out these resources for additional information:"
  title="Product resources and support"
/>

Card variants