Radio Card Component

<RadioCard Label="Landscape"
           Value="landscape"
           Aspect="landscape"
           Selected="@(orientation == "landscape")"
           OnSelect="@(v => orientation = v)">
    <Visual>
        <div class="orientation-preview orientation-preview--landscape"></div>
    </Visual>
</RadioCard>

@foreach (var t in themes)
{
    <RadioCard Label="@t.Label"
               Value="@t.Key"
               Aspect="landscape"
               Selected="@(theme == t.Key)"
               OnSelect="@(v => theme = v)">
        <Visual>
            <div class="@($"theme-preview theme-preview--{t.Key}")">
                <div class="theme-preview__bar"></div>
            </div>
        </Visual>
    </RadioCard>
}

@foreach (var (key, label) in layouts)
{
    <RadioCard Label="@label"
               Value="@key"
               Aspect="landscape"
               Selected="@(layout == key)"
               OnSelect="@(v => layout = v)">
        <Visual>
            <div class="@($"layout-preview layout-preview--{key}")">
                <div class="layout-preview__sidebar"></div>
                <div class="layout-preview__main"></div>
            </div>
        </Visual>
    </RadioCard>
}

@* Square aspect with custom SVG illustration in the Visual slot *@
<RadioCard Label="Desktop"
           Value="desktop"
           Aspect="square"
           Selected="@(device == "desktop")"
           OnSelect="@(v => device = v)">
    <Visual>
        <svg viewBox="0 0 64 48" ...>...</svg>
    </Visual>
</RadioCard>

<RadioCard Label="Unavailable"
           Aspect="landscape"
           Disabled="true">
    <Visual>
        <div class="orientation-preview orientation-preview--landscape"></div>
    </Visual>
</RadioCard>

Radio Card Component

Orientation picker

Theme picker

Layout picker

Device picker

Disabled