MudBlazor - Blazor Component Library

Simple Card

Story of the day

The quick, brown fox jumps over a lazy dog.

<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.

<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 happened.

The quick, brown fox jumps over a lazy dog.

<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 happened.</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>

Card

API

Simple Card

Outlined

Header

The Story Book