Card

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

API
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>
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>
An unhandled exception has occurred. See browser dev tools for details. Reload 🗙