Data & display

AppInfoList

Read-only label/value rows, each with a leading icon tile — a contact or details panel.

<app-info-list><app-info-row icon="mail" label="Email" value="…" /></app-info-list>

<app-info-list> states a handful of facts about one thing — the contact panel on a client record, the details column beside a form, the summary in a drawer. Each row is an icon tile, a label, and a value.

It is deliberately read-only. If a value can be edited, it belongs in a form field, not here — a list that mixes stated facts with editable ones makes the reader guess which is which.

Playground

One row, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the row above it.

Emailravi@acme.example
<app-info-list>
    <app-info-row icon="mail" label="Email" value="ravi@acme.example" />
</app-info-list>
empty value renders a muted em-dashA blank value never shows as a blank row — <app-info-list> renders a muted “—” instead, so a missing fact reads as “no value”, not a broken layout.

Basic

Each row takes an icon, a label and a value. The label is uppercase and small so the value is what the eye lands on.

A details list
Values are pre-formatted strings — the tag helper does not know your locale.
Primary contactRavi Kumar
SiteHinjawadi, Pune, MH
Show code 
<app-info-list>
    <app-info-row icon="user" label="Primary contact" value="Ravi Kumar" />
    <app-info-row icon="map-pin" label="Site" value="Hinjawadi, Pune, MH" />
</app-info-list>

Inside a card

The usual home. The first and last rows shed their outer padding, so the list sits flush against the card body without a doubled gap.

A contact card
No wrapper or spacing utilities needed.
Contact
Primary contactRavi Kumar
Emailravi@acme.examplePhone+91 98765 43210
SiteHinjawadi, Pune, MH
Show code 
<app-card title="Contact">
    <app-info-list>…</app-info-list>
</app-card>

When to use

Use it when

  • You are stating several facts about one record.
  • Some of the values are actionable (email, phone, a document link).
  • The panel is read-only — a details view, a drawer, a summary column.

Reach for something else when

  • The values are editable. → app-input and friends
  • It is one headline number. → app-kpi-tile
  • You are listing many records. → app-data-table
  • The facts are events over time. → app-timeline

Best practices

Do
Emailravi@acme.example
An icon that matches the field, a specific label, and an href only where the value is genuinely actionable.
Don't
Inforavi@acme.example
A generic icon and “Info” as the label carry no meaning, and a placeholder href makes a dead link the reader will click.

Every option

The whole surface of the tag helper, one cell per value — a row without href, every value state, a sample of icons, and the class passthrough.

row — with vs without href

no href — plain row
Primary contactRavi Kumar
href="mailto:…" — link row
Emailravi@acme.example

value — populated, null, and empty string

value="ravi@acme.example"
Emailravi@acme.example
value="" — renders "—"
Phone-
No separate null state hereA tag-helper attribute has no null distinct from an empty string — value="" already covers what React's null/'' both render as: a muted “—”.

value — ReactNode

React-only — Razor has no node slot
OwnerJane Doe
ReactNode values are React-onlyThe React AppInfoList accepts a ReactNode as value (e.g. bolded text). The Razor <app-info-row> takes a plain string — reach the same visual outcome by pre-formatting the string, since a tag helper attribute cannot carry markup.

icon — a sample of names

icon="mail"
FieldValue
icon="user"
FieldValue
icon="phone"
FieldValue
icon="map-pin"
FieldValue
icon="building"
FieldValue
icon="calendar"
FieldValue
icon="briefcase"
FieldValue
icon="globe"
FieldValue
icon="credit-card"
FieldValue
icon="circle"
FieldValue

class — passthrough

(default)
Primary contactRavi Kumar
class="contact-card"
Primary contactRavi Kumar

multiple rows

<app-info-row> children — an ordered list of rows
Primary contactRavi Kumar
Emailravi@acme.examplePhone+91 98765 43210
SiteHinjawadi, Pune, MH

Attributes

AttributeTypeDefaultDescription
iconstring—Glyph for the round tile (on <app-info-row>). Match it to the field.
labelstring—What the value is (on <app-info-row>). Be specific.
valuestring—The fact itself, pre-formatted (on <app-info-row>). React-only: also accepts a ReactNode — Razor takes plain text only.
hrefstring—Makes the row a link (on <app-info-row>). Omit for a plain row.
classstring—Extra classes on the list (on <app-info-list>). Matches React's className.