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

Layout Customization

The Card component aligns its content based on the CSS Flexbox Layout.

The default flow of the inner containers is set by specifying the card orientation. To built on top of that, you can override the flex-flow CSS property of each Card building block and achieve a versatile range of highly customized layouts. For example, you can vertically align the content of a horizontal card and vice versa. To ease you in the process, the Kendo UI themes expose the k-vstack and k-hstack predefined utility CSS classes which will automatically apply the required styles.

Horizontal Containers

To specify a horizontal flex direction for an inner Card element, apply the k-hstack utility CSS class to it.

The following example demonstrates a vertically oriented Card with horizontally oriented inner containers.

Example
View Source
Edit In Stackblitz  
Change Theme:

Vertical Containers

To specify a vertical flex direction for an inner Card element, apply the k-vstack utility CSS class to it.

The following example demonstrates a horizontally oriented card with vertically oriented inner containers.

Example
View Source
Edit In Stackblitz  
Change Theme: