Standard Components

Account Locations

Built

Displays a map with multiple location pins and a scrollable list of addresses linked to the current account or parent record. Each location shows a name and address with a building icon. Used to visualize the geographic spread of an account's sites.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Showing all site locations belonging to an account on the account detail page.
  • +Providing a geographic overview of project locations or branch offices.
  • +Visualizing the spread of an account's physical presence across a region.

When not to use

  • −Single-location records — use the Address Map component instead.
  • −Route planning or distance calculation — use a dedicated routing tool.
  • −Records without location relationships — use a different component or hide the card.

Breeze UI Adherence

70
Breeze UI Adherence
Good
70% of styling uses Breeze UI tokens

Tokens Used

color5 tokens
color.border.default
Card border, footer divider, list row separators
border-color
color.background.surface
Card background, building icon container
background-color
color.text.default
Card header title, location name text
color
color.text.subtle
Address text, building icon stroke
color
color.interactive.default
View All link text
color
spacing2 tokens
spacing.5
Header and footer horizontal padding (20px)
padding-inline
spacing.4
Location row horizontal padding (16px)
padding-inline
sizing1 token
spacing.3.5
Header and footer height (56px / 3.5rem)
height
typography3 tokens
font.size.sm
Header title, location name, View All link (14px)
font-size
font.weight.semibold
Header title weight (600)
font-weight
font.size.xs
Address text below location name (12px)
font-size

Custom CSS — not covered by Breeze UI

⚠Map container
overflow: hidden (clip region) on map container

Crops the Google Maps iframe to hide third-party UI chrome (attribution bar, fullscreen button). Custom layout technique not covered by Breeze UI.

⚠Location pin markers
w-3.5 h-3.5 bg-blue-500 rounded-full border-2 border-white shadow-md

Custom multi-pin markers. Breeze UI does not have a map marker component — uses Tailwind utilities for blue dots with white border matching the design spec.

⚠Location list row
hover:bg-gray-50 transition-colors on list rows

List item hover highlight for interactive feedback. Breeze UI does not provide a list-item hover token — uses Tailwind gray-50 background.

⚠Building icon container
w-10 h-10 bg-blue-50 rounded-md flex items-center justify-center

Building icon container with light blue background. Breeze UI does not have an icon-container pattern — uses Tailwind utilities for the 40x40px rounded square.

⚠Active location highlight (pin and row)
bg-blue-50 ring-2 ring-blue-200 transition with scale(1.5) transform

Map-to-list linkage highlight animation. Cross-linking a map pin click to a list row highlight (and vice versa) is custom interaction not covered by Breeze UI.

Widths
1/2defaultFull
Object Pages
AccountsProjects

Settings

locationsRelationshiptext*

The relationship name to query child location records from the parent account.

Default: Locations
nameFieldtext*

The field on the location record that contains the location name (e.g., 'San Francisco Headquarters').

Default: Name
addressFieldtext*

The field on the location record that contains the formatted address string.

Default: Address
geoLatitudeFieldtext

The latitude field on the location record for map pin placement.

Default: GeoLocation.Latitude
geoLongitudeFieldtext

The longitude field on the location record for map pin placement.

Default: GeoLocation.Longitude
maxListItemsnumber

Maximum number of location rows to display in the list before showing the 'View All' link.

Default: 5
mapHeightselect

Height of the map region relative to the card. Small ~150px, medium ~250px, large ~350px.

Default: medium
smallmediumlarge

Attributes

locationsLocation[]

Array of location records resolved from the locationsRelationship. Each contains name, address, and coordinates.

{ name: string, address: string, lat: number, lng: number }
totalCountnumber

Total number of location records. Used for the 'View All' link and header count.

recordIdstring

The UID of the parent record. Automatically bound by the page builder runtime.

mapBoundsMapBounds

Auto-calculated bounding box that fits all location pins. Used to set the initial map viewport.

{ north: number, south: number, east: number, west: number }

Changelog

2026-03-01v1.0

Initial component specification created with multi-pin map and location list.

2026-03-06v1.1

Added Breeze UI token mapping and adherence tracking. Added map-to-list interaction spec. Defined auto-fit bounds viewport behavior.