# xpl-data-card

Data Cards display snippets of information and can be linked to larger data sets. Data Cards give users "at a glance" information about their data.

The `icon` and `smallStatIcon` properties accept icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.

<!-- Auto Generated Below -->


## Properties

| Property               | Attribute                 | Description                                                                                                                                                                                                                                                                                                                                      | Type                                    | Default     |
| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ----------- |
| `detail`               | `detail`                  | An optional field that typically describes or modifies the small stat                                                                                                                                                                                                                                                                            | `string`                                | `undefined` |
| `icon`                 | `icon`                    | An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                              | `string`                                | `undefined` |
| `leadingIcon`          | `leading-icon`            | Whether to display the icon or not.                                                                                                                                                                                                                                                                                                              | `boolean`                               | `true`      |
| `link`                 | `link`                    | Whether the card is a link                                                                                                                                                                                                                                                                                                                       | `boolean`                               | `undefined` |
| `name`                 | `name`                    | Name Term                                                                                                                                                                                                                                                                                                                                        | `string`                                | `undefined` |
| `shortStat`            | `short-stat`              | Detail, stat, or value to be displayed in short format. Will be rendered when card is smaller than 441px.                                                                                                                                                                                                                                        | `string`                                | `undefined` |
| `smallStat`            | `small-stat`              | An Optional stat further enhancing the main metric of the card.                                                                                                                                                                                                                                                                                  | `string`                                | `undefined` |
| `smallStatIcon`        | `small-stat-icon`         | An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                            | `string`                                | `undefined` |
| `smallStatVariant`     | `small-stat-variant`      | set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used | `"negative" \| "neutral" \| "positive"` | `undefined` |
| `stat`                 | `stat`                    | Detail, stat, or value to be displayed. Will be rendered when card is larger than 441px. Will also appear in the tooltip when shortStat is shown.                                                                                                                                                                                                | `string`                                | `undefined` |
| `tooltipTextSmallStat` | `tooltip-text-small-stat` | An optional field for tooltip text of small stat                                                                                                                                                                                                                                                                                                 | `string`                                | `''`        |
| `tooltipTextStat`      | `tooltip-text-stat`       | An optional field for tooltip text of stat                                                                                                                                                                                                                                                                                                       | `string`                                | `''`        |
| `variant`              | `variant`                 | Color variant. Used to set the icon color and background.                                                                                                                                                                                                                                                                                        | `"primary" \| "secondary"`              | `undefined` |


## Slots

| Slot              | Description                                                                                                                                |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `"graph-content"` | Content that is shown on the right-side of the card. Generally used for supplemental data visualizations for the data-card                 |
| `"title"`         | The title for the card. This slot should be used as a replacement for the name field. Used to define a title and tooltip for the data-card |


## Dependencies

### Depends on

- [xpl-icon](../xpl-icon)
- [xpl-tooltip](../xpl-tooltip)

### Graph
```mermaid
graph TD;
  xpl-data-card --> xpl-icon
  xpl-data-card --> xpl-tooltip
  style xpl-data-card fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*