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-hstack predefined utility CSS classes which will automatically apply the required styles.
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.
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.