---
title: Overview
position: 1
seo_title: Overview of the Card Component
seo_description: Learn about the basic features of the Telerik and Kendo UI Card
  component and its types, check out the extensive set of available options in
  its live demo, and master its appearance by setting its layout as you wish on
  the fly.
---
## Card Overview

The Card is a user interface (UI) element that resembles a virtual card. Its modular nature allows for easy grouping and organization on a page. It can hold together diverse content such as text, media (images, video), action buttons, and other composite elements.  

Cards serve to create a clean and user-friendly design for dashboards, article pages, media feeds, profile overviews and product listings. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/card/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/card/appearance"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/cards/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/card/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/card/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/cards"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/cards"}],"demo":"components/card/overview"}'></LiveDemo>

### Appearance

Cards provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Card, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the Card summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Title"},{"text":"Subtitle"},{"text":"Card header"},{"text":"Content area"},{"text":"Card body"},{"text":"Action button"},{"text":"Card actions"}]}'>![A Telerik and Kendo UI Card component and its elements including title, subtitle, content area, and action buttons](images/components-card-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Card component, including the card header, body, and actions")</BlueprintImage>

#### Layout

The Telerik and Kendo UI Card can appear both in horizontal and vertical orientations.

<BlueprintImage data='{"description":"","labels":[{"text":"A Card with a vertical layout"},{"text":"A Card with a horizontal layout"}]}'>![The Telerik and Kendo UI Card shown in the available layouts](images/components-card-overview-layout.png "The Telerik and Kendo UI Card provides a vertical and a horizontal layout")</BlueprintImage>

#### Card with Media

The Media module can contain different media formats, such as image and video. The layout of the Card can be set both to vertical and horizontal.

<BlueprintImage data='{"description":"","labels":[{"text":"Vertically oriented Card with media"},{"text":"Horizontally oriented Card with media"}]}'>![A Telerik and Kendo UI Card with media shown with a vertical and a horizontal layout](images/components-card-overview-variants-card-with-media.png "The Telerik and Kendo UI Card with media supports both the vertical and horizontal layouts")</BlueprintImage>

#### Card with Footer

The Footer module can contain different kinds of supporting content, such as links and icons. The layout of the Card can be set both to vertical and horizontal.

<BlueprintImage data='{"description":"","labels":[{"text":"Vertically oriented Card with footer"},{"text":"Horizontally oriented card with footer"}]}'>![The vertical and horizontal layouts for a Telerik and Kendo UI Card](images/components-card-overview-variants-card-with-footer.png "The Telerik and Kendo UI Card with footer can be oriented vertically or horizontally")</BlueprintImage>

### Action Buttons Alignment

Based on the layout of the Card (vertical or horizontal), you can choose how to position the action buttons within the actions area.

#### Vertical Card

<BlueprintImage data='{"description":"","labels":[{"text":"Left-aligned action buttons"},{"text":"Right-aligned action buttons"},{"text":"Centered action buttons"},{"text":"Stretched action buttons"},{"text":"Centered vertically stacked action buttons"}]}'>![The possible alignments of the action buttons for a vertically oriented Telerik and Kendo UI Card](images/components-card-overview-action-buttons-alignment-vartical-card.png "A vertically oriented Telerik and Kendo UI Card provides left, right, center, stretched, and centered vertical alignment for its action buttons")</BlueprintImage>

#### Horizontal Card

<BlueprintImage data='{"description":"","labels":[{"text":"Top-aligned action buttons"},{"text":"Bottom-aligned action buttons"},{"text":"Centered action buttons"},{"text":"Stretched action buttons"}]}'>![The possible alignments of the action buttons for a horizontally oriented Telerik and Kendo UI Card](images/components-card-overview-action-buttons-alignment-horizontal-card.png "A horizontally oriented Telerik and Kendo UI Card provides top, bottom, center, and stretched alignment for its action buttons")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Card","description":"Find more information about the Kendo UI for Angular Card in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/card/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Card","description":"Find more information about the Telerik UI for Blazor Card in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/card/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Card","description":"Find more information about the Kendo UI for jQuery Card in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/styles-and-layout/cards"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Card","description":"Find more information about the KendoReact Card in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/card/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Card","description":"Find more information about the Kendo UI for Vue Card in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/card/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Card","description":"Find more information about the Telerik UI for ASP.NET Core Card component.","url":"https://docs.telerik.com/aspnet-core/knowledge-base/cards"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Card","description":"Find more information about the Telerik UI for ASP.NET MVC Card component.","url":"https://docs.telerik.com/aspnet-mvc/knowledge-base/cards"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>