Components
Property card
Property card
Bordered property card with a labelled strip header (Sale / Purchase) over a full-bleed map hero with floating map controls, then a two-column body (on wide layouts) of the address, price, SDLT, facts and yes/no flags. Fills its container width; the host decides when two sit side by side. Has a house-hunting state (estimated figures, no address/map yet) and a built-in empty state.
Canonical
Purchase
<koala-property-card model="@Model.PurchaseProperty" />A purchase leg with its full-bleed map hero, address and facts. The strip header reuses the calm surface-container band with a plum label.
States
3 states
Purchase
Purchase
Estimated price
£450,000
SDLT estimate
£12,500
Buyers
2
Building
House / Bungalow
Ownership
Freehold
Situation
First time buyer
New build
No
Mortgage
Yes
Shared ownership
No
Still house hunting
No property chosen yet — the figures below are based on the estimated purchase price.
Purchase
No property on this purchase yet
Add the property they're buying and we'll pull in the price, parties and an SDLT estimate for you.
Props
| Attribute | Notes |
|---|---|
| model | PropertyCardModel — Title, address lines, Price/SdltEstimate, Facts, Flags, map links, and the empty-state fields (IsEmpty, EmptyTitle, AddHref…). |
| flush | Bool. Drops the card's own border/rounding so it merges into a parent surface that already supplies the card chrome (e.g. a tab panel). The Sale/Purchase band and full-bleed map hero stay. |
Do & don't
Sale
Price
£745,000
14 Lavender Hill
London
SW11 5RW
London
SW11 5RW
Sellers
2
Ownership
Freehold
Do
Let the card own its surface — drop it straight into the page or grid cell. It brings its own border, header band and padding, and fills the container width.
Sale
Price
£745,000
14 Lavender Hill
London
SW11 5RW
London
SW11 5RW
Sellers
2
Ownership
Freehold
Don't
Don't wrap it in another
koala-card — you get a double border and doubled padding. If a parent panel already supplies the card chrome, pass flush instead.