React Card

  • Organize your app's layout in a user-friendly way with this accessible React Card component that supports a variety of types and layouts, action buttons and more.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The KendoReact Card component represents a common layout item in many modern design languages. The React Card component contains content and actions about a single subject and can work well on its own, as well as when combined with components like the KendoReact ListView to display a collection of cards. Each Card comes with content, title and subtitle, action button areas, images and footers.

    See React Card Overview demo

    React Card - Overview, KendoReact UI Library
  • Card Types

    While the KendoReact Card component has a default look -and -feel which can be customized to fit any UX requirements, it does also come with several built-in styles to cut down on the number of customizations needed. This includes styles for "warning" or "error" content, among several others.

    See React Card Types demo

    React Card - Types, KendoReact UI Library
  • Action Buttons

    Every React Card has a dedicated area for action buttons related to the content. The content of these action items, as well as their overall layout and orientation, is completely customizable through the available configuration options.

    See React Card Action Buttons demo

    React Card - Action Buttons, KendoReact UI Library
  • Orientation

    The KendoReact Card component allows for developers to arrange its content either vertically or horizontally, automatically rearranging the building blocks of the Card component to fit the selected orientation.

    See React Card Orientation demo

    React Card - Orientation, KendoReact UI Library
  • Layouts

    When rendering multiple KendoReact Card components, there are several built-in layouts to help display cards in various ways, including building a list from top to bottom as well as rendering the cards side-by-side.

    See React Card Layouts demo

    React Card - Layouts, KendoReact UI Library
  • Globalization

    Out of the box, the KendoReact Card component supports rendering the Card and its content in a right-to-left fashion, supporting many globalization requirements.

    React Card - Globalization, KendoReact UI Library
  • Accessibility

    Accessibility is a foundational piece of the KendoReact UI library and the React Card component is no exception. With this in mind, the KendoReact Card is AAA rated with WCAG 2.0 and supports both Section 508 and WAI-ARIA accessibility standards.

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.