RadCard exposes additional classes that are used for laying out series of cards. Adding a simple CSS class to the container element of the cards will align them in the correct way.
For Group and Deck of cards, adding the
.k-card-deck-scrollwrap class also to the cards container allows the first and last child elements with
.k-button to be positioned as scroll buttons.
Check out the online demo where this is demonstrated - RadCard Layout demo.
To render Cards that are detached from one another on a single row, use the
To render Cards that are attached to one another on a single row, use the
To render cards that are detached from one another in a column, use the
The Card itself and CardActionsComponent can order its child elements horizontally or vertically via the Orientation property. For all the other element, within or outside the Card component, you can use the following exposed CSS classes to achieve flex layout:
|CSS Class||CSS equivalent||Description|
||display: flex; flex-direction: column;||Position a vertical flex container element|
||display: flex; flex-direction: row;||Position a horizontal flex container element|
||flex-grow: 1; flex-basis: 0;||Define a column element within a horizontal flex container|