Info Panel Component
Style: Action button
Edit/delete buttons + dismissible alert
Information
Patient NameLabel
Aung Myo Tun
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
razor
<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"),
};
}Style: Dropdown menu
Three-dot menu header
Information
Patient NameLabel
Aung Myo Tun
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
razor
<InfoPanel Title="Information"
Style="dropdown"
Columns="4"
Fields="@fields"
AlertTitle="We've just released a new feature"
AlertDescription="..." />Column layouts
2- and 3-column field grids
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)
razor
@* 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" />Without badges
ShowBadge="false" removes field chips
Account Summary
Plan
Professional
Billing Cycle
Monthly
Next Invoice
March 25, 2026
Amount Due
$49.00
razor
<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." />Style: All (Delete + Edit + Dots)
Combine text buttons with a dropdown menu in the header
Information
Patient NameLabel
Aung Myo Tun
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
Father NameLabel
San Lwin
razor
<InfoPanel Title="Information"
Style="all"
Columns="4"
Fields="@fields"
ShowAlert="false"
OnDelete="HandleDelete"
OnEdit="HandleEdit" />Variant: Menu (narrow item list)
326px panel with featured-icon rows, hover + selected states
razor
<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 content
HeaderActions / ChildContent / FooterContent slots
Custom Panel
Status
Active
Priority
High
Assigned To
Phoenix Baker
razor
<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="primary" Title="Custom footer" />
</FooterContent>
</InfoPanel>