New to Telerik UI for Blazor? Download free 30-day trial

Card Layouts

When working with a collection of Cards, you can control the layout of their rendering 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:

Cards in Deck Layout

Add the k-card-deck class to the wrapping container of the Cards to organize them in a Deck Layout.

Cards in Deck Layout. The result from the snippet below.

Deck layout

@*Cards with Deck Layout*@

<div class="k-card-deck">

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

</div>

Cards in List Layout

Add the k-card-list class to the wrapping container of the Cards to organize them in a List Layout.

Cards in List Layout. The result from the snippet below.

List layout

@*Cards with List Layout*@

<div class="k-card-list">

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

</div>

Cards in Group Layout

Add the k-card-group class to the wrapping container of the Cards to organize them in a Group Layout.

Cards in Group Layout. The result from the snippet below.

Group layout

@*Cards with Group Layout*@

<div class="k-card-group">

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

    <TelerikCard Width="200px">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardBody>
            <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
        </CardBody>
        <CardSeparator></CardSeparator>
        <CardActions Layout="CardActionsLayout.Center">
            <TelerikButton Class="k-flat">Action 1</TelerikButton>
            <TelerikButton Class="k-flat">Action 2</TelerikButton>
        </CardActions>
    </TelerikCard>

</div>

See Also

In this article
Not finding the help you need? Improve this article