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.
The building blocks of the Card component are the following:
- (Required) kendo-card
- (Optional) kendo-card-header—The Header helps you to render a better structure and is responsible for aligning the content that is passed to it.
- (Optional) kendo-card-body—The Body provides control over the full layout of the component.
- (Optional) kendo-card-actions—The Actions element specifies various user actions such as clicking buttons or links.
- (Optional) kendo-card-footer—The Footer helps you to render a better structure and is responsible for aligning the content that is passed to it.
- (Optional) kendoCardSeparator—The Separator creates a visual separation of the card content.
- (Optional) kendoCardMedia—The Media shows images or media in cards and can be optionally used as a container.
- (Optional) kendoCardTitle—The Title adds styles to the headers.
- (Optional) kendoCardSubtitle—The Subtitle adds styles to sub-header texts and additional information.
This section represents a step-by-step guide for creating the card from the previous example.
- Add the Card component.
- Add the Header component to the Card and pass it the desired contents.
- To specify whether the direction of the content is horizontal or vertical, add one of the
k-vstackclasses to the Header or to any other container element of the Card.
- To style the text, add the
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.
The following example demonstrates how to add the Card Footer and then fine-tune the styling of the component.