• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact Card Overview

The Card component represents any type of content and all kind of actions about a single subject.

It provides clarity, categorization and an attractive way of presenting content.

The Card component consists of the following building blocks:


The following example demonstrates the Card in action.

Example
View Source
Change Theme:

The Card is part of the KendoReact Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Card and the rest of the components in the package, see the Getting Started with the KendoReact Layout Package guide.

Key Features

  • Orientation—You can arrange the content of the Card vertically or horizontally.
  • Types—The predefined types provide a convenient way to change the appearance of the Card.
  • Actions—The Card allows you to render custom action buttons and to customize their orientation and layout.
  • Cards Layouts—You can arrange the Cards in three built-in layouts: list, group and deck.

In this article

Not finding the help you need?