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

Card Building Blocks

The Card component supports a variety of template-based components used as building blocks. All building blocks can be rendered as root level elements of the Card and therefore can be used as desired with no restriction in their place of declaration or requirement for the Card structure. The elements can also be nested inside each other.

CardHeader

Use the CardHeader tag to render header area of the Card.

Render CardHeader area. The result from the snippet below.

Card Header

@* Card Header *@

<TelerikCard Width="200px">

    <CardHeader>
        <strong>This is the Card Header.</strong>
    </CardHeader>

    <CardBody>
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </CardBody>
</TelerikCard>

CardBody

Use the CardBody tag to render the body of the Card.

Render CardBody area. The result from the snippet below.

Card Body

@* Card Body *@

<TelerikCard Width="200px">

    <CardBody>
        <p><strong>This is the Card Body.</strong> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </CardBody>

</TelerikCard>

CardFooter

Use the CardFooter tag to render the footer area of the Card.

Render CardFooter area. The result from the snippet below.

Card Footer

@* Card Footer *@

<TelerikCard Width="200px">
    <CardBody>
        <p> Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </CardBody>

    <CardFooter>
        <strong>This is the Card Footer.</strong>
    </CardFooter>

</TelerikCard>

CardImage

Use the CardImage tag to render the image section of the Card. The image will fill the size of the card unless you set any other Width and Height values.

Use CardImage in the Card component. The result from the snippet below.

Card Image

@*Card Image*@

<TelerikCard Width="200px">
    <CardHeader>
        <CardTitle>Rome</CardTitle>
        <CardSubTitle>Capital of Italy</CardSubTitle>
    </CardHeader>

    <CardImage Src="https://docs.telerik.com/blazor-ui/components/card/images/rome.jpg"></CardImage>

</TelerikCard>

CardActions

Use the CardActions tag to render the actions area of the Card. You could place any action buttons inside and style them with the predefined orientation and layout of the buttons.

Use CardActions in the Card component. The result from the snippet below.

Card Actions

@* Card Actions *@

<TelerikCard Width="200px">
    <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>

CardSeparator

Use the CardActions tag to render the actions area of the Card. An example of CardSeparator used between Card elements or nested inside an element.

Use CardSeparator in the Card component. The result from the snippet below.

Card Separator

@* Card Separator *@

<TelerikCard Width="200px">
    <CardBody>        
        <p> Some quick example text to build on the card title and make up the bulk of the card content.</p>

        <CardSeparator></CardSeparator>

        <p>Some other text in the Card Body after the separator.</p>
    </CardBody>

    <CardSeparator></CardSeparator>

    <CardActions Layout="CardActionsLayout.Center">
        <TelerikButton Class="k-flat">Action 1</TelerikButton>

        <CardSeparator Orientation="CardOrientation.Vertical"></CardSeparator>

        <TelerikButton Class="k-flat">Action 2</TelerikButton>
    </CardActions>
</TelerikCard>

CardTitle

Use the CardTitle tag to render a title (heading). Although the header area is suitable for placing title, it is not required and you can use the CardTitle as desired. The below sample demonstrates implementation of a title in three different sections.

Use CardTitle in the Card component. The result from the snippet below.

Card Footer

@* Card Title *@

<TelerikCard Width="200px">

    <CardTitle>This is standalone Title </CardTitle>

    <CardHeader>
        <CardTitle>This is Title in the Card Header</CardTitle>
    </CardHeader>
    <CardBody>
        <CardTitle>This is Title in the Card Body</CardTitle>
        <p> Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </CardBody>
</TelerikCard>

CardSubTitle

Use the CardSubTitle tag to render sub title. Although the header area is suitable for placing title and sub title, it is not required and you can use the CardSubTitle as desired. It can also be used along with the CardTitle or as a standalone element. The below sample demontstrates both approaches.

Use CardSubTitle in the Card component. The result from the snippet below.

Card Footer

@* Card Subtitle *@

<TelerikCard Width="200px">
    <CardHeader>
        <CardTitle>This is Title in the Card Header</CardTitle>

        <CardSubTitle>This is Subtitle in the Card Header along with Title</CardSubTitle>

    </CardHeader>
    <CardBody>

        <CardSubTitle><strong>Just Subtitle in the Card Body</strong></CardSubTitle>

        <p> Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </CardBody>  
</TelerikCard>

See Also

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