Card Overview

The Card for Blazor is a component that combines text, visual content and actions about a single subject. It quickly grabs the user’s attention with its clean layout, consisting of a title, usually an image, some text as the body and perhaps a footer. You can use it to easily organize content when building catalogs, dashboards, blogs, e-shops, etc. It has dedicated areas for its building blocks and that provides various ways of component usage.

Telerik UI for Blazor Ninja image

The Card component is part of Telerik UI for Blazor, a professional grade UI library with 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:

Basics

To use a Telerik Card for Blazor:

  1. add the TelerikCard tag

  2. add the desired Card Building Blocks

You can see a code example below, review the Building Blocks article for more examples.

Example

The below snippet demonstrates the setup of a Card component with all building blocks implemented. You don't have to use them all.

The result from the snippet.

Card component

@* Blazor Card with all building blocks included *@

<TelerikCard Width="300px">
    <CardHeader>
        <CardTitle>Tourism</CardTitle>
    </CardHeader>
    <CardImage Src="https://docs.telerik.com/blazor-ui/components/card/images/rome.jpg"></CardImage>
    <CardBody>
        <CardTitle>Rome</CardTitle>
        <CardSubTitle>Capital of Italy</CardSubTitle>
        <CardSeparator></CardSeparator>
        <p>
            Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display.

            Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire.
        </p>
    </CardBody>
    <CardActions Layout="@CardActionsLayout.Stretched">
        <TelerikButton Class="k-flat" Icon="heart-outline">Like</TelerikButton>
        <TelerikButton Class="k-flat" Icon="share">Share</TelerikButton>
        <TelerikButton Class="k-flat">Read More</TelerikButton>
    </CardActions>
    <CardFooter>
        <span style="float:left">Created by @@john</span>
        <span style="float:right">March 05, 2021</span>
    </CardFooter>
</TelerikCard>

Features

The Card provides the following features:

  • Width - string - defines width of the component.

  • Class - string - the CSS class that will be rendered on the main wrapping element of the Card.

  • Orientation - CardOrientation - defines the orientation of the card. Takes a member of the Telerik.Blazor.CardOrientation enum (Horizontal or Vertical). Read more in the Card Orientation article.

  • ThemeColor - string - defines the appearance of the component. We support predefined theme colors such as info, error, success (members of the Telerik.Blazor.ThemeColors class). Test changing the Card theme colors in our live demo.

  • ChildContent - RenderFragment - defines the child content of the component. All possible building blocks can be directly used as a ChildContent of the Card.

To make multiple Cards occupy the same height automatically, use the predefined Deck or Group layouts. If the Cards should wrap to multiple rows, use the custom Tile layout. It is also possible to set a specific height to Cards with a CSS rule.

See Also

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