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 tinted status band carrying the object's live state — current stage, progress, and what's next. The band is the one sanctioned in-card tint in the system (DESIGN.md §9.2).
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
- T-AB12CD
- 12 Lavender Hill, SW11 5RW
Clients
- Alex Hawthorne
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
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
blocked="true" renders the stage name in text-danger.
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. |