BlazorUI Demo

Card

A structured surface with optional header, footer, colour, navigation and click behaviour.

Structured content
Weekly activity

1,284

Events processed

12% increase
View code 
<BuiCard Color="Palette.Teal" Variant="Variant.Soft">
    <Header><BuiText Typo="Typo.H5">Weekly activity</BuiText></Header>
    <ChildContent><BuiText Typo="Typo.H2">1,284</BuiText><BuiText Color="Colors.Secondary">Events processed</BuiText></ChildContent>
    <Footer><BuiBadge Color="Colors.Success">12% increase</BuiBadge></Footer>
</BuiCard>
Interactive cards

Use Href for navigation or OnClick for an action; do not place nested interactive controls inside a component-wide interactive card.

Open forms

Navigate using a semantic link.
View code 
<div class="demo-card-grid">
    <BuiCard Href="/components/forms/text-field"><BuiText Typo="Typo.H5">Open forms</BuiText><BuiText>Navigate using a semantic link.</BuiText></BuiCard>
    <BuiCard OnClick="HandleCardClick" Color="Palette.Violet"><BuiText Typo="Typo.H5">Run action</BuiText><BuiText>@cardMessage</BuiText></BuiCard>
</div>

@code {
    private string cardMessage = "Click the whole card.";
    private void HandleCardClick() => cardMessage = "Card clicked.";
}