---
title: Dashboard Card
position: 999
seo_title: "Dashboard Card UI Building Block | Progress Telerik "
seo_description: Elevate dashboard functionality with versatile dashboard cards.
  Enhance data visualization and user interaction.
---
## Overview

A Dashboard Card has an exclusive use in dashboard interfaces, especially on the overview page which serves as a hub page and provides insightful data. As it is a highly customizable element, it could include different parts (header, footer, body) and components (charts, tables, images, links, etc.), depending on their purpose.  

Dashboard cards are often used to represent statistics, tasks, status updates, schedules and calendars, company policies, and useful links. They serve as a navigation to other pages that the user might like to reach and informational overview of the application’s content.

Well-designed Dashboard cards represent the relevant information in the most suitable way with the help of data visualization components, tables, date components, etc.) in a concise and understandable manner.

### Key Principles

* Diverse formats – different types of content require different card’s layout and size;
* Relevance – dashboard cards must represent only the most relevant and valuable information to avoid overflooding the interface;
* Clear naming – each card must include a label within it to indicate what does it stands for.

### Dashboard Card Variants

The Telerik and Kendo UI Dashboard Card offers design variants showcased in our demos, each tailored to enhance your application development by covering different usage scenarios.

#### Dashboard Card 1

<LiveDemoV2 data='{"demoName":"dashbrdcard-1","previewImage":"images/dashbrdcard-1-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-1-v4.png)</LiveDemoV2>

#### Dashboard Card 2

<LiveDemoV2 data='{"demoName":"dashbrdcard-2","previewImage":"images/dashbrdcard-2-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-2-v4.png)</LiveDemoV2>

#### Dashboard Card 3

<LiveDemoV2 data='{"demoName":"dashbrdcard-3","previewImage":"images/dashbrdcard-3-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-3-v4.png)</LiveDemoV2>

#### Dashboard Card 4

<LiveDemoV2 data='{"demoName":"dashbrdcard-4","previewImage":"images/dashbrdcard-4-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-4-v4.png)</LiveDemoV2>

#### Dashboard Card 5

<LiveDemoV2 data='{"demoName":"dashbrdcard-5","previewImage":"images/dashbrdcard-5-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-5-v4.png)</LiveDemoV2>

#### Dashboard Card 6

<LiveDemoV2 data='{"demoName":"dashbrdcard-6","previewImage":"images/dashbrdcard-6-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-6-v4.png)</LiveDemoV2>

#### Dashboard Card 7

<LiveDemoV2 data='{"demoName":"dashbrdcard-7","previewImage":"images/dashbrdcard-7-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-7-v4.png)</LiveDemoV2>

#### Dashboard Card 8

<LiveDemoV2 data='{"demoName":"dashbrdcard-8","previewImage":"images/dashbrdcard-8-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-8-v4.png)</LiveDemoV2>

#### Dashboard Card 10

<LiveDemoV2 data='{"demoName":"dashbrdcard-10","previewImage":"images/dashbrdcard-10-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-10-v4.png)</LiveDemoV2>

#### Dashboard Card 11

<LiveDemoV2 data='{"demoName":"dashbrdcard-11","previewImage":"images/dashbrdcard-11-v4.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-11-v4.png)</LiveDemoV2>

#### Dashboard Card 12

<LiveDemoV2 data='{"demoName":"dashbrdcard-12","previewImage":"images/dashbrdcard-12.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-12.png)</LiveDemoV2>

#### Dashboard Card 13

<LiveDemoV2 data='{"demoName":"dashbrdcard-13","previewImage":"images/dashbrdcard-13.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-13.png)</LiveDemoV2>

#### Dashboard Card 14

<LiveDemoV2 data='{"demoName":"dashbrdcard-14","previewImage":"images/dashbrdcard-14.png","width":600,"height":470,"scale":0.5,"frameBorderRadius":"6px"}'>![demo preview image](images/dashbrdcard-14.png)</LiveDemoV2>

### Framework-Specific Documentation

For framework specific information, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Product Homepage","description":"Discover the Kendo UI for Angular components.","url":"https://www.telerik.com/kendo-angular-ui/components/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Product Homepage","description":"Discover the Telerik UI for Blazor components.","url":"https://docs.telerik.com/blazor-ui/introduction"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Product Homepage","description":"Discover the KendoReact UI components.","url":"https://www.telerik.com/kendo-react-ui/components/introduction/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

</Wrap>