New to Kendo UI for Angular? Start a free 30-day trial

Building Blocks

The Card allows you to build a wide variety of layouts and tailor the component to specific requirements.

Card Elements and Containers

Each card consists of content building blocks which are related to a single subject and provide clarity and categorization for presenting the content in an attractive way.

The building blocks of the Card component are the following:

  • (Required) kendo-card
  • (Optional) kendo-card-headerThe Header helps you to render a better structure and is responsible for aligning the content that is passed to it.
  • (Optional) kendo-card-bodyThe Body provides control over the full layout of the component.
  • (Optional) kendo-card-actionsThe Actions element specifies various user actions such as clicking buttons or links.
  • (Optional) kendo-card-footerThe Footer helps you to render a better structure and is responsible for aligning the content that is passed to it.
  • (Optional) kendoCardSeparatorThe Separator creates a visual separation of the card content.
  • (Optional) kendoCardMediaThe Media shows images or media in cards and can be optionally used as a container.
  • (Optional) kendoCardTitleThe Title adds styles to the headers.
  • (Optional) kendoCardSubtitleThe Subtitle adds styles to sub-header texts and additional information.
Example
View Source
Change Theme:

Creating a Basic Card

This section represents a step-by-step guide for creating the card from the previous example.

Adding the Card and the Header

  1. Add the Card component.
  2. Add the Header component to the Card and pass it the desired contents.
  3. To specify whether the direction of the content is horizontal or vertical, add one of the k-hstack or k-vstack classes to the Header or to any other container element of the Card.
  4. To style the text, add the kendoCardTitle and kendoCardSubtitle directives.
Example
View Source
Change Theme:

Adding the Body and the Media

The following example demonstrates how to add the Body and Media directives as well as to set the orientation of the Card separator.

The Card Body provides a container for adding and aligning any content inside the card. The Card Media directive aligns any media that is displayed on the Card. Depending on the desired orientation, the Separator can be either vertical or horizontal.

Example
View Source
Change Theme:

Adding the Action Buttons

You can add action buttons inside the Card Actions container and then you can specify their orientation and layout. For more information, refer to the article on the action buttons of the Card.

Example
View Source
Change Theme:

The following example demonstrates how to add the Card Footer and then fine-tune the styling of the component.

Example
View Source
Change Theme: