Property Card Design

Contents of property Card

Spacing and Padding

Property cards are designed based on a base number of 12px (X), this value drives the size of the spacing and padding inside the card.

Sizing

The default size represents the size of the property card that looks that best and should be the default size when the map page is loaded.

The minimum size is dictated by the most extreme edge case, where the card isn’t aesthetic, however remains legible, any smaller and the content would no longer fit

The maximum size is dictated by the minimum size, on the map page we look to display 2 properties side by size, the maximum size is 1px smaller than 2 minimum sized cards side by side, plus the 8px gap.

Dynamic Elements

There are two dynamic elements on the property card:

Dynamic Metric

This is the central blue metric displayed on the property card.

It updates based on the selected sorting option from the home page.

The label next to the metric also changes to reflect the chosen sorting option. This improves UX by making it clear to the user what data they are viewing.

Limitation: Some labels are longer (e.g., “Rental Income”, “Days on Market”). To accommodate this, the text must stack vertically if needed.

The labels must stack if there is not at least a 12 px gap between the “Property Price” and “Property Condition”, otherwise they may remain extended.

Alignment: The label should align with the primary metric baseline, stacking vertically as needed (see images below).

Property Condition

By default, the property condition should be written horizontally, but if the metric description is stacked and there remains a less than 12px gap, then the Property condition must stack in order to make space.

If the label does not fit (e.g., “Lightly Renovated”), the text should stack vertically.

High Level

Overall, if there isn’t atleast a 12px gap between the side elements and the center one then the dynamic metric label stacks, if there still isn’t enough space than the property condition must stack.

Hover State

On hover the card gets a darker drop shadow and the days on market chip expands.