Data Card

The Data Card component is an data component that allows user to display important information in form of cards.

Usage

Use title prop to display info on top of data card. Use data prop to display data in the middle of the card. If desired, you can use the title and data slots instead.

<template>
  <DemoGrid>
    <ci-data-card
      title="Total Emails Sent"
      data="12,345"
    />
    <ci-data-card>
      <template #title>
        Total Emails Sent
      </template>
      <template #data>
        12,345
      </template>
    </ci-data-card>
  </DemoGrid>
</template>

Trends

Use the trends array to display trend data below the card data.

<template>
  <ci-data-card
    title="Scheduled Meetings"
    data="543"
    :trends="trends"
  />
</template>

<script>
export default {
  data() {
    return {
      trends: [
        {variant: 'success', value: '+25%', text: 'vs last week'},
        {variant: 'danger', value: '-10%', text: 'vs last year'},
      ]
    }
  }
}
</script>

Property	Type	Description
variant	TagVariant	The tag variant to use
value	String	The value shown inside the tag
text	String	The text to the right of the tag

Actions

Use the actions prop to add actions to your card. Each action is a PopoverMenuItem.

For a single action, this will render as the action's icon so you must supply an icon.

For multiple actions, this will render as an ellipsis Icon that opens a Popover Menu when clicked. You must supply text for each action.

Whenever an action is clicked, it will emit the @action:click event and execute the action's onClick function if it has one.

<template>
<DemoGrid>
  <ci-data-card
    title="Single Action"
    data="500"
    :actions="singleAction"
  />
  <ci-data-card
    title="Multiple Actions"
    data="500"
    :actions="multipleActions"
  />
</DemoGrid>
</template>

<script>
export default {
  data() {
    return {
      singleAction: [{ id: 'information', icon: 'circle-i', text: 'Information', onClick: () => alert('Clicked circle-i icon') }],
      multipleActions: [
        { id: '1', icon: 'flash-outline', text: 'Action 1', onClick: () => alert('Clicked Action 1') },
        { id: '2', text: 'Action 2', onClick: () => alert('Clicked Action 2') }
      ]
    }
  }
}
</script>

Each action is a PopoverMenuItem with some additional requirements.

Property	Type	Required	Description
icon	String	Required for singular actions	The icon to render
text	String	Required for multiple actions	Text to show in the popover menu

Clickable Cards

Use the to prop to make your card link to a webpage or route when clicked.

You can also pass a @click event if you need to do something programmatically.

Clickable cards have shadows on hover.

<template>
  <DemoGrid>
    <ci-data-card
      data="Route"
      to="/components/button"
    >
      Button Docs
    </ci-data-card>
    <ci-data-card
      data="Route"
      to="/components/button"
      target="_blank"
    >
      Button new tab
    </ci-data-card>
    <ci-data-card
      data="Link"
      to="https://www.cirrusinsight.com"
    >
    CI Website
    </ci-data-card>
    <ci-data-card
      data="Link"
      to="https://www.cirrusinsight.com"
      target="_blank"
    >
    CI Website in new tab
    </ci-data-card>
    <ci-data-card
      data="Click"
      @click="showAlert"
    >
      Open Alert
    </ci-data-card>
  </DemoGrid>
</template>
<script>
export default {
  methods: {
    showAlert() {
      alert('Alert shown!')
    }
  }
}
</script>

Custom Content

Use the default slot for custom content. This will be rendered after all other content.

<template>
  <DemoGrid>
    <ci-data-card data="80%">
      of 250 users are active
      <br><br>
      <ci-button>Learn more</ci-button>
    </ci-data-card>
  </DemoGrid>
</template>

Events

Event	Args	Emitted when...
@click	-	Card is clicked
@action:click	-	Card action is clicked