Card Layouts
When working with a collection of Cards, you can control the collection layout by wrapping all the Card instances in a container and apply the desired styles to position them.
The Telerik Themes provide the following layouts through built-in classes:
In addition, any layout can be created with suitable CSS code. For example - a Tile layout of Cards that wrap to multiple rows.
Cards in Deck Layout
Add the k-card-deck class to the wrapping container of the Cards to organize them in a Deck Layout. All Cards will display in a single row with some empty space between them. All Cards will expand vertically to have the same height as the highest card in the deck.
Cards in Deck Layout. The result from the snippet below.
Cards in List Layout
Add the k-card-list class to the wrapping container of the Cards to organize them in a List Layout. All Cards will display in a single column.
Cards in List Layout. The result from the snippet below.
Cards in Group Layout
Add the k-card-group class to the wrapping container of the Cards to organize them in a Group Layout. All Cards will display in a single row with no space between them. All Cards will expand vertically to have the same height as the highest card in the group.
Cards in Group Layout. The result from the snippet below.