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.
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.
