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-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.
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
- 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-hstackork-vstackclasses to the Header or to any other container element of the Card. - To style the text, add the
kendoCardTitleandkendoCardSubtitledirectives.
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.
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.
Adding the Footer and the Remaining Styles
The following example demonstrates how to add the Card Footer and then fine-tune the styling of the component.