Building blocks

The Card allows you to build a wide variety of layouts and tailor the component to specific requirements. 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. These are Header, Body, Footer and Actions. The Card component is the only required element for building a card. All other building blocks are optional.

The Header and Footer components can be used to yield a better structure and are responsible for aligning the contents passed to them. The Actions component allows you to specify different actions, which the user can take by clicking buttons, or for example, links.

To build a rich layout, you can add the following directives to the Card content:

  • Separator - used to create a visual separation of the card content.
  • Title - used for adding styles to headers.
  • Subtitle - used for adding styles to sub-header texts and additional information.
  • Media - used for showing images or media in cards and optionally used as container.
Example
View Source
Edit In Stackblitz  
Change Theme:

Creating a Basic Card

This section represents a step by step guide for creating the card shown above.

Adding Card and Header Components

Start by adding the Card component. Then, proceed by adding the Card Header component to the Card and pass it the desired contents. One of the classes k-hbox or k-vbox can be added to the Header (or any other container element of the Card) in order to specify, whether the direction of the content is horizontal or vertical. The kendoCardTitle and kendoCardSubtitle directives can be added to the text for styling.

Example
View Source
Edit In Stackblitz  
Change Theme:

Adding Body and Card Media

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. The usage of the Separator is also demonstrated in the code snippet below. It can be either vertical or horizontal, depending on the given orientation.

Example
View Source
Edit In Stackblitz  
Change Theme:

Adding Action Buttons

Action buttons can be added inside the Card Actions container, where their orientation and layout could be specified. For more information, refer to the Action Buttons section.

Example
View Source
Edit In Stackblitz  
Change Theme:
Example
View Source
Edit In Stackblitz  
Change Theme: