Header and Content in Blazor Card Component

14 Aug 20263 minutes to read

The Card can be created with a header that contains a title, a sub-title, and an optional image. To add a header, use the CardHeader component. The Card provides the following elements and corresponding CSS classes for building a header.

Element Description
Caption Wrapper element that includes the title and sub-title.
Image Includes a header image with the specified dimensions.
Parameter Description
Title Main title text within the header.
SubTitle A sub-title within the header.
CardImage To include heading image within the header.

Title and Subtitle

To add a header to the Card, use the CardHeader component and set the Title and SubTitle properties.

  • Add Title Property inside the header caption for adding main title.

  • Add SubTitle Property inside the header caption element for adding Title.

Image

The Card header supports an optional image set via the ImageUrl parameter on CardHeader. The image is rendered either before or after the caption, depending on the value of the ImagePosition parameter (default: Before).

@using Syncfusion.Blazor.Cards

<SfCard ID="HugeImage">
    <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
</SfCard>
<SfCard ID="SecondCard">
    <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
</SfCard>

Content

Content in the Card holds text, images, links, and all possible HTML elements. It renders anywhere inside the Card root element.

  • Create a CardContent component.
  • Place content div element in the Card root element or within any Card inner elements.
@using Syncfusion.Blazor.Cards

<SfCard ID="HugeImage">
    <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
</SfCard>

<SfCard ID="SecondCard">
    <CardContent Content="Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French."/>
</SfCard>

Image

You can place a raw <img> element inside CardContent to render an image within the content area. For component-based image rendering, use the CardImage component as described in Image and Divider in Blazor Card.

@using Syncfusion.Blazor.Cards
<SfCard ID="Card">
    <CardHeader Title="Canon 135mm"/>
    <CardContent>
        <div>
            The fastest 135mm telephoto lens in its class. Two UD-glass elements correct secondary spectrum for outstanding sharpness and color.
        </div><br>
        <img src="https://ej2.syncfusion.com/demos/src/card/images/Camera.png" alt="Canon 135mm" height="300px" width="100%" />
    </CardContent>
</SfCard>

<style>
    #Card {
        width: 300px;
    }
</style>
Blazor Card Component Content with Image

See also