Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Card

Cards can contain actions, text, or media like images or graphics. Keeping a card to a single subject keeps the design clean.

See Card API for parameter documentation.

Simple Card

Story of the day

The quick, brown fox jumps over a lazy dog.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudCardContent>
        <MudText>Story of the day</MudText>
        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
    </MudCardActions>
</MudCard>

Outlined

Story of the day

The quick, brown fox jumps over a lazy dog.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard Outlined="true">
    <MudCardContent>
        <MudText>Story of the day</MudText>
        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
    </MudCardActions>
</MudCard>

Header

The Story Book

This day everything happend.

The quick, brown fox jumps over a lazy dog.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h6">The Story Book</MudText>
        </CardHeaderContent>
        <CardHeaderActions>
            <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
        </CardHeaderActions>
    </MudCardHeader>
    <MudCardContent>
        <MudText>This day everything happend.</MudText>
        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Read More</MudButton>
    </MudCardActions>
</MudCard>

Media

Old Paint

Old paint found on a stone house door.

This photo was taken in a small village in Istra Croatia.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-door.png" Height="200" />
    <MudCardContent>
        <MudText Typo="Typo.h5">Old Paint</MudText>
        <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
        <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
    </MudCardActions>
</MudCard>

Combined

I

Istra Croatia

Peninsula in Europe

This photo was taken in a small village in Istra Croatia.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudCardHeader>
        <CardHeaderAvatar>
            <MudAvatar Color="Color.Secondary">I</MudAvatar>
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudText Typo="Typo.body1">Istra Croatia</MudText>
            <MudText Typo="Typo.body2">Peninsula in Europe</MudText>
        </CardHeaderContent>
        <CardHeaderActions>
            <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
        </CardHeaderActions>
    </MudCardHeader>
    <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-pilars.png" Height="250" />
    <MudCardContent>
        <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudIconButton Icon="@Icons.Material.Filled.Favorite" Color="Color.Default" />
        <MudIconButton Icon="@Icons.Material.Filled.Share" Color="Color.Default" />
    </MudCardActions>
</MudCard>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙