Info Panel Component

Information

Patient NameLabel

Aung Myo Tun

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

We've just released a new feature

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.

<InfoPanel Title="Information"
           Style="button"
           Columns="4"
           Fields="@fields"
           AlertTitle="We've just released a new feature"
           AlertDescription="..."
           OnDelete="HandleDelete"
           OnEdit="HandleEdit"
           OnAlertDismiss="HandleDismiss" />

@code {
    private List<InfoPanel.InfoPanelField> fields = new()
    {
        new("Patient Name", "Aung Myo Tun", "Label"),
        new("Father Name",  "San Lwin",     "Label"),
    };
}

Patient Information

Demographics and contact details

Patient NameLabel

Aung Myo Tun

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

<InfoPanel Title="Patient Information"
           Description="Demographics and contact details"
           Style="button"
           Columns="4"
           Fields="@fields"
           ShowAlert="false"
           OnDelete="HandleDelete"
           OnEdit="HandleEdit">
    <TitleIcon>
        <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.667 17.5c0-1.163 0-1.745-.144-2.218a3.333 3.333 0 0 0-2.222-2.222c-.473-.143-1.055-.143-2.218-.143H7.917c-1.163 0-1.745 0-2.218.143a3.333 3.333 0 0 0-2.222 2.222c-.144.473-.144 1.055-.144 2.218M13.75 6.25a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
                  stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </TitleIcon>
</InfoPanel>

Information

Patient NameLabel

Aung Myo Tun

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

We've just released a new feature

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.

<InfoPanel Title="Information"
           Style="dropdown"
           Columns="4"
           Fields="@fields"
           AlertTitle="We've just released a new feature"
           AlertDescription="..." />

Patient Details

Full Name

Aung Myo Tun

Date of Birth

15 Jan 1990

Gender

Male

Phone

+95 9 1234 5678

Email

aung@example.com

Address

123 Main Street, Yangon

Contact Information

Email

phoenix@untitledui.com

Phone

+1 (555) 000-0000

Address

100 Smith Street, Melbourne VIC 3000

Timezone

Pacific Standard Time (PST)

@* 3-column, no alert *@
<InfoPanel Title="Patient Details"
           Style="button"
           Columns="3"
           Fields="@patientFields"
           ShowAlert="false" />

@* 2-column, no alert *@
<InfoPanel Title="Contact Information"
           Style="dropdown"
           Columns="2"
           Fields="@contactFields"
           ShowAlert="false" />

Account Summary

Plan

Professional

Billing Cycle

Monthly

Next Invoice

March 25, 2026

Amount Due

$49.00

Your subscription renews on March 25

Make sure your payment method is up to date to avoid any service interruptions.

<InfoPanel Title="Account Summary"
           Style="button"
           Columns="4"
           ShowBadge="false"
           Fields="@fields"
           AlertTitle="Your subscription renews on March 25"
           AlertDescription="Make sure your payment method is up to date." />

Information

Patient NameLabel

Aung Myo Tun

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

Father NameLabel

San Lwin

<InfoPanel Title="Information"
           Style="all"
           Columns="4"
           Fields="@fields"
           ShowAlert="false"
           OnDelete="HandleDelete"
           OnEdit="HandleEdit" />

Patient Details

Patient Name

Aung Zaw MoeActive

Date of Birth

15 Jan 1990

Gender

Male

National ID

12/MaBaTa(N)123456Verified

Phone

+95 9 1234 5678

Address

123 Main Street, Yangon

Account Summary

Plan

Professional

Billing Cycle

Monthly

Next Invoice

March 25, 2026

Amount Due

$49.00

Your subscription renews on March 25

Update your payment method to avoid any interruption.

<InfoPanel Title="Patient Details"
           Variant="rows"
           Style="button"
           Fields="@fields"
           ShowAlert="false"
           OnDelete="HandleDelete"
           OnEdit="HandleEdit" />

@code {
    private List<InfoPanel.InfoPanelField> fields = new()
    {
        new("Patient Name",  "Aung Zaw Moe", "Active"),
        new("Date of Birth", "15 Jan 1990"),
        new("Gender",        "Male"),
        new("Phone",         "+95 9 1234 5678"),
    };
}

<InfoPanel Title="Information"
           Variant="menu"
           Style="all"
           Items="@items"
           SelectedItemIndex="0"
           OnDelete="HandleDelete"
           OnEdit="HandleEdit" />

@code {
    private List<InfoPanel.InfoPanelItem> items = new()
    {
        new("Aung Myo Tun", "24 yrs, Male, Chest Pain", "New Admission"),
        new("San Lwin",     "42 yrs, Male, Hypertension", "Follow-up"),
    };
}

Custom Panel

Status

Active

Priority

High

Assigned To

Phoenix Baker

Custom footer content

You can place any component in the footer slot.

<InfoPanel Title="Custom Panel">
    <HeaderActions>
        <Button Variant="secondary" Text="Export" />
        <Button Variant="primary"   Text="Save" />
    </HeaderActions>
    <ChildContent>
        <div class="info-panel-grid info-panel-grid-3">
            ...custom field markup...
        </div>
    </ChildContent>
    <FooterContent>
        <Alert Color="brand" Title="Custom footer" />
    </FooterContent>
</InfoPanel>

Info Panel Component

Style: Action button

Title icon

Style: Dropdown menu

Column layouts

Without badges

Style: All (Delete + Edit + Dots)

Variant: Rows (stacked label:value)

Variant: Menu (narrow item list)

Custom content