Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
Components Summary panel

Summary panel

The detail-page right-rail summary on View Transaction / View Quote. Wraps a <koala-info-column> body and adds an optional status section carrying the object's live state — current stage, progress, and what's next — as the top section (same surface as the rest of the panel, separated by a rule; no tint).

<koala-summary-panel>

Canonical — with status band

Main content placeholder — the summary panel sits in the right rail of a detail page.
Current stage 4 of 10
Answering enquiries
Next Exchange of contracts

Transaction

Clients

  • Alex Hawthorne 
<koala-summary-panel stage-label="@Model.StageLabel" next-label="@Model.NextLabel"
                     completed-count="@Model.Completed" total-count="@Model.Total">
    <koala-info-column>
        <koala-info-section title="Transaction">
            <li class="flex items-center gap-2 min-w-0">
                <koala-icon name="Transaction" size="Small" class="shrink-0 text-on-surface-hint" />
                <span class="truncate font-medium text-on-surface">@Model.Reference</span>
            </li>
        </koala-info-section>
    </koala-info-column>
</koala-summary-panel>

The band renders only when stage-label is set, and the Next line only when next-label is set. Progress segments are driven by completed-count / total-count.

No band — quote

Quote

  • Q-AB12CD
  • Expires in 4 days 
<koala-summary-panel>
    <koala-info-column>
        @* body only — no stage-label means no status band *@
    </koala-info-column>
</koala-summary-panel>

Quotes have no current milestone, so the band is omitted entirely — the panel shows just the body.

Blocked

Current stage 2 of 10
Awaiting searches
Next Answering enquiries

Transaction

  • T-EF34GH 
<koala-summary-panel stage-label="Awaiting searches" next-label="Answering enquiries"
                     completed-count="2" total-count="10" blocked="true">
    <koala-info-column>...</koala-info-column>
</koala-summary-panel>

blocked="true" renders the stage name in text-danger.

Body — info column

<koala-info-column> / -section

The panel body is a <koala-info-column> — a vertical stack of titled <koala-info-section>s separated by hairlines, each holding <li> rows. These are the rail's body primitives, not a separate component — they only ever live inside a summary panel.

About

  • Q-AB12CD
  • Expires in 4 days

Notes

View all
  • Latest note about the client's preferences. 
<koala-info-column>
    <koala-info-section title="About">
        <li class="flex items-center gap-2 min-w-0">
            <koala-icon name="Quote" size="Small" class="shrink-0 text-on-surface-hint" />
            <span class="truncate font-medium text-on-surface">Q-AB12CD</span>
        </li>
    </koala-info-section>
    <koala-info-section title="Notes" title-aside="View all">
        <li class="flex items-start gap-2 min-w-0">…</li>
    </koala-info-section>
</koala-info-column>

Optional title-aside renders a right-aligned secondary line next to the section title — a "View all" link or a count.

Props

5 attributes
Attribute Notes
stage-label Current stage name. When null/blank the status band is omitted entirely (the quote case).
next-label Next stage name, shown after a muted "Next" lead-in. Optional.
completed-count / total-count Drive the mini progress segments and the "X of Y" count. No segments when total is 0.
blocked Renders the stage name in text-danger.
(body) A <koala-info-column>. The panel owns its inner padding and full-bleeds the band, so the wrapper must add no px-/py- of its own.