Bootstrap Blazor enterprise-level UI component library

Card card components

Card is a simple example

Demo

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<Card>
    <BodyTemplate>
        <h5>Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a class="btn btn-primary">Go somewhere</a>
    </BodyTemplate>
</Card>

You can show the content by adding the HeaderTemplate and FooterTemplate elements

Demo

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

<Card>
    <HeaderTemplate>
        Featured
    </HeaderTemplate>
    <BodyTemplate>
        <h5>Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a class="btn btn-primary">Go somewhere</a>
    </BodyTemplate>
    <FooterTemplate>
        2 days ago
    </FooterTemplate>
</Card>

IsCenterTitle

IsCenterIntro

Demo

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

<Card IsCenter="true">
    <HeaderTemplate>
        Featured
    </HeaderTemplate>
    <BodyTemplate>
        <h5>Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a class="btn btn-primary">Go somewhere</a>
    </BodyTemplate>
    <FooterTemplate>
        2 days ago
    </FooterTemplate>
</Card>

A card with a border color

By setting, The makes the border and Body color appropriate

Demo

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="row g-3">
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Primary" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Primary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Secondary" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Secondary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Success" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Success card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Warning" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Warning card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Danger" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Danger card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Info" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Info card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        <Card Color="Color.Dark" IsCenter="true">
            <HeaderTemplate>
                Header
            </HeaderTemplate>
            <BodyTemplate>
                <h5>Dark card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </BodyTemplate>
        </Card>
    </div>
</div>

CollapsibleTitle

Card body can collapse/expand by set IsCollapsible to true

Demo

Set Collapsed value to true for default collapsed card body.

Collapsible

Click card hader for collapse/expand card body

Collapsible

Header Template

Click card hader for collapse/expand card body

Collapsible

Click card hader for collapse/expand card body

@inject IStringLocalizer<CardCollapsible> Localizer

<Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]">
    <BodyTemplate>
        @Localizer["CollapsibleBody"]
    </BodyTemplate>
</Card>
<Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
    <HeaderTemplate>
        @Localizer["CollapsibleHeaderTemplate"]
        <Select TValue="string" class="ms-1">
            <Options>
                <SelectOption Text="Test1" Value="" />
                <SelectOption Text="Test2" Value="1" />
                <SelectOption Text="Test3" Value="2" />
                <SelectOption Text="Test4" Value="3" />
            </Options>
        </Select>
    </HeaderTemplate>
    <BodyTemplate>
        @Localizer["CollapsibleBody"]
    </BodyTemplate>
</Card>
<Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3" Collapsed="true">
    <BodyTemplate>
        @Localizer["CollapsibleBody"]
    </BodyTemplate>
</Card>

Header Template

Setting HeaderTemplate for custom CardHeader

Demo

CollapsibleHeader Template

Header Template

@inject IStringLocalizer<CardHeaderTemplate> Localizer

<Card HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
    <HeaderTemplate>
        @Localizer["CollapsibleHeaderTemplate"]
        <Select TValue="string" class="ms-1">
            <Options>
                <SelectOption Text="Test1" Value="" />
                <SelectOption Text="Test2" Value="1" />
                <SelectOption Text="Test3" Value="2" />
                <SelectOption Text="Test4" Value="3" />
            </Options>
        </Select>
    </HeaderTemplate>
    <BodyTemplate>
        @Localizer["CollapsibleHeaderTemplateTitle"]
    </BodyTemplate>
</Card>

Shadow effect

Enable shadow effect by set IsShadow to true

Demo

Shadow effect

Shadow effect sample

@inject IStringLocalizer<CardShadow> Localizer

<Card IsShadow="true" HeaderText="@Localizer["ShadowTitle"]">
    <BodyTemplate>
        @Localizer["ShadowBody"]
    </BodyTemplate>
</Card>

CardCompare

未设置

Demo

CollapsibleHeader Template

Click card hader for collapse/expand card body

Collapsible

Header Template

Click card hader for collapse/expand card body

@inject IStringLocalizer<CardCompare> Localizer

<Card IsCollapsible="false" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
    <HeaderTemplate>
        @Localizer["CollapsibleHeaderTemplate"]
        <Select TValue="string">
            <Options>
                <SelectOption Text="Test1" Value="" />
                <SelectOption Text="Test2" Value="1" />
                <SelectOption Text="Test3" Value="2" />
                <SelectOption Text="Test4" Value="3" />
            </Options>
        </Select>
    </HeaderTemplate>
    <BodyTemplate>
        @Localizer["CollapsibleBody"]
    </BodyTemplate>
</Card>

<Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
    <HeaderTemplate>
        @Localizer["CollapsibleHeaderTemplate"]
        <Select TValue="string">
            <Options>
                <SelectOption Text="Test1" Value="" />
                <SelectOption Text="Test2" Value="1" />
                <SelectOption Text="Test3" Value="2" />
                <SelectOption Text="Test4" Value="3" />
            </Options>
        </Select>
    </HeaderTemplate>
    <BodyTemplate>
        @Localizer["CollapsibleBody"]
    </BodyTemplate>
</Card>

Card

Aggregate information to display in a card container

Demo

Card title

Demo

Special title treatment

Demo

Special title treatment

Demo

Primary card title

Secondary card title

Success card title

Warning card title

Danger card title

Info card title

Dark card title

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01