Card

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

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:

1. Title
2. Subtitle
3. Card header
4. Content area
5. Card body
6. Action button
7. Card actions

Layout

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

1. A Card with a vertical layout
2. A Card with a horizontal layout

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.

1. Vertically oriented Card with media
2. Horizontally oriented Card with media

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.

1. Vertically oriented Card with footer
2. Horizontally oriented card with footer

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

1. Left-aligned action buttons
2. Right-aligned action buttons
3. Centered action buttons
4. Stretched action buttons
5. Centered vertically stacked action buttons

Horizontal Card

1. Top-aligned action buttons
2. Bottom-aligned action buttons
3. Centered action buttons
4. Stretched action buttons

Framework-Specific Documentation

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

Kendo UI for Angular CardFind more information about the Kendo UI for Angular Card in the official product documentation of the component.

Telerik UI for Blazor CardFind more information about the Telerik UI for Blazor Card in the official product documentation of the component.

Kendo UI for jQuery CardFind more information about the Kendo UI for jQuery Card in the official product documentation of the component.

KendoReact CardFind more information about the KendoReact Card in the official product documentation of the component.

Kendo UI for Vue CardFind more information about the Kendo UI for Vue Card in the official product documentation of the component.

Telerik UI for ASP.NET Core CardFind more information about the Telerik UI for ASP.NET Core Card component.

Telerik UI for ASP.NET MVC CardFind more information about the Telerik UI for ASP.NET MVC Card component.