<h2>When to use</h2>
<p>Use metrics cards as part of a dashboard when you need to surface important data and find it fast.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Metrics card</td>
<td>Important data at a glance</td>
</tr>
<tr>
<td>Chart</td>
<td>Complex data in a visual format</td>
</tr>
</tbody></table>
<br>

<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"anatomy of a metrics card","caption":"The six elements of a metrics card:\n\n1. **Icon** - a visual representation of the subject of the metric.\n2. **Title** - subject of the metric.\n3. **Metric value** - a numeric representation of the metric.\n4. **Context label** - adds context to how the metric is being used, or what it is being measured against.\n5. **Status** - a badge or trend, with icon, that represents the state of the metric.\n6. **Additional Label** - more information about the metric.","url":"https://dds.dell.com/site/data-visualization/metrics-card/3-1---990x330---metrics-card-anatomy--1-.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Read article","path":"https://www.smartsheet.com/essential-guide-defining-business-dashboard-metrics","type":"External"},"title":"smartsheet","description":"Essential Guide for Defining Business Dashboard Metrics","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Metrics cards are used on dashboards to show data at a glance. The metric value is parsed from existing charts, tables, graphs, a database, an Excel spreadsheet, or an expense report. 

Display the most important and easily understood data. Also, limit the number of cards used to those necessary to tell your story. This will aid in clarity and prevent confusion.

Single metrics cards are used to highlight one piece of important data.

Some examples are:

* Sales revenue
* Productivity ratios
* Monthly profit and loss
* Overhead costs
* Inventory size
* Online conversions

Also, you can use a string of metric cards to tell a story about a process or product.

Some examples are:

* Monthly sales, monthly sales bookings, engaged leads in funnel, average conversion time 
* Revenue, average dollar per sale, units sold, and goal
* Monthly support ticket submissions, average resolution time, and cost per resolution

<details data-name='image-block' data-images='[{"alt":"dashboard with metrics cards","caption":"Single metrics cards show one important metric. A string of cards can tell a fuller story of the health of a product or service.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---990x495---metrics-card-usage--1-.png"}]' data-numberofcolumns='1'></details>

## Options

Metrics cards are customizable, allowing you to tell a story about the data that makes sense for your product or service.

You can customize metrics cards by changing the: 

* **icon** to match the title. You can also disable the icon on Figma settings.
* **title** to define the metric.
* **metric value** font size to small or large. This can reduce or increase the visual emphasis on the card.
* **context label** to configure how the metric is being measured. You can also disable the context area in Figma settings.
* **badge** to show if the metric is in a positive, neutral, warning, or negative state. 
* **trend** to show how a metric is trending.
* **additional label** to add more context to the metric, suiting the needs of your product or service. This can be disabled in Figma.

The metrics card itself is static HTML. You can manually update the data shown by its HTML elements or automate the updates using JavaScript.

<details data-name='image-block' data-images='[{"alt":"metrics card with large metric number and negative trend","caption":"Metrics card showing icon, title, large metric value, context label, and downward trend.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---320x320---metrics-card-kinds--1-.png"},{"alt":"metrics card with small metric value and badge showing positive state","caption":"On this card the icon was removed. A small metric value, additional label, and status badge with positive state were added","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---320x320---metrics-card-kinds--2-.png"},{"alt":"metric card showing large metric number and badge with warning status.","caption":"This example shows how minimal added elements can highlight the metric number.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---320x320---metrics-card-kinds--3-.png"}]' data-numberofcolumns='3'></details>

## Color

Stoplight colors (red, yellow, green) may be used with badges or trends to convey positive, negative, or median values. See [Color](https://www.delldesignsystem.com/foundations/color/) guidelines for more information.

Semantic colors have the following meaning:

* **Green** - conveys success, profit, or good health, but typically means that users don’t need to take any action.
* **Yellow** - often conveys a warning state and notifies users that something may need action or intervention. 
* **Red -** conveys critical warning or error states, loss of profit, or poor health. It’s used to alert the user to take corrective action.

## Sizes

**Container size**

The size of the metric card container ranges from a minimum of 240 pixels wide to a maximum of 520 pixels wide.

<details data-name='image-block' data-images='[{"alt":"size range of the metrics card container","caption":"The image on the left shows the smallest size option for the metrics card container, while the one on the right shows the largest.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---990x495---metrics-card-size.png"}]' data-numberofcolumns='1'></details>

**Font size**

The font size of the metric value can be adjusted to small or large in Figma settings. Increasing the size on the metric value places more emphasis on that particular data, while decreasing it places emphasis on the data of other elements in the card.

<details data-name='image-block' data-images='[{"alt":"metrics card with small size metrics card","caption":"Showing the metric value in small font size places emphasis on other data.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---320x320---metrics-card-kinds--2-.png"},{"alt":"metrics card showing large size metric value","caption":"Showing the metric value in large font size places emphasis on it.","url":"https://dds.dell.com/site/data-visualization/metrics-card/2-1---320x320---metrics-card-kinds--1-.png"}]' data-numberofcolumns='2'></details>

## Layout

The metrics card uses coded placements for all objects inside the card.

## Responsive

When designing for different screen sizes, place the metrics card in a DDS grid. This ensures the size of the metrics card will adjust as screen sizes change.

## Specifications

All specifications, with the exception of the metric's font size, are built into the metric card component, This ensures consistency across products, ease of use, and accessibility.

When designing strings of cards, use 16 pixels as the minimum space between cards.

Altering the component specifications could have negative effects, so this is not recommended.

<details data-name='image-block' data-images='[{"alt":"two metrics cards showing the correct minimum spacing between cards","caption":"The correct minimum spacing between cards is 16 pixels.","url":"https://dds.dell.com/site/data-visualization/metrics-card/3-1---990x330---metrics-card-kinds.png"}]' data-numberofcolumns='1'></details>

## Standards

### Content

**Labels**

Labels should clearly and concisely explain how the metric in the card is being used. Is it a monthly aggregate, year-to-date, or a comparison to last week? 

**Title**

Titles should clearly and concisely define the metric. Is it data about sales, revenue, or new hires?

**Alignment**

All text is left-aligned.

**Capitalization**

Use sentence case in all areas.

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla-dv.delldesignsystem.com/index.html?path=/docs/components-metrics-card--basic).

<details data-name='iframe-doc' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-metrics-card--basic&viewMode=docs&websiteFrame=true'></details>

Designed as dashboard components, metrics cards show single data points as a way to quickly track and consume important data. 

Metrics Card

Metrics card

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
