Horizontal Card in Blazor Card Component

5 Aug 20261 minute to read

The Blazor Card component lays out its child elements vertically by default. You can switch the layout to horizontal by setting the Orientation property to CardOrientation.Horizontal on the SfCard.

Stacked cards

Within a horizontal card, you can group a set of child elements into a vertical column by wrapping them in the CardStacked component. This is useful when one section of the card should remain vertical (for example, a header stacked above the content) while the rest of the card is horizontal.

@using Syncfusion.Blazor.Cards

<SfCard Orientation="CardOrientation.Horizontal" ID="Trimmer">
    <CardStacked>
        <CardHeader Title="Philips Trimmer" />
        <CardContent Content="Philips trimmers are designed to last longer than 4 ordinary trimmers and DuraPower Technology which optimizes power." />
    </CardStacked>
    <img src="//ej2.syncfusion.com/demos/src/card/images/Trimmer.png">
</SfCard>
<style>
    .e-card-image {
            background: url('./sample.jpg');
            height: 160px;;
    }

    .e-card {
        width: 300px;
        margin: auto;
    }
</style>
Blazor Card Component with Horizontal Orientation

See also