Action Buttons in Blazor Card Component

26 Dec 20231 minute to read

You can include action buttons within the Card and customize them. Action button is a div element with CardFooter component followed by button tag or anchor tag within the card root element.

For adding action buttons, you can create a CardFooterContent component within the card action element.

@using Syncfusion.Blazor.Cards

<SfCard ID="HugeImage">
    <CardFooter>
        <CardFooterContent>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Vertical

By default, action buttons are aligned horizontally. They can also be aligned vertically by adding the Orientation property.

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard ID="HugeImage" Orientation="CardOrientation.Vertical">
    <CardImage Image="images/cards/steven.png"/>
    <CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle"/>
    <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge"/>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>