Action Buttons in Blazor Card

14 Aug 20261 minute to read

You can include action buttons within the Blazor Card and customize them. An action button is rendered inside a div element that uses the CardFooter component, followed by a button or anchor tag within the card root element.

To add action buttons, create a CardFooterContent component within the card footer element.

@using Syncfusion.Blazor.Cards

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

Vertical

Action buttons can be combined with a vertical card layout by setting 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>

See also