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 {SurfaceCard, UseCaseCard} from '@fuegokit/react'

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>

<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

Import

Typescript support

Surface Card

Use Case Card

Footer Card

See also