Office page blocks

The office page is composed of atomic blocks arranged by the Barbican Office Page pattern. This page covers the office-specific blocks. The office also uses several shared sections (social links, phone lists, and corporate licenses) documented once there.

Masthead · barbican/office-logo, barbican/office-image, barbican/office-name

The header atoms: banner image, logo, and name. The whole masthead is also available as the Barbican Office Header pattern.

Class	Targets
barbican-office-image__img	The banner image
barbican-office-image__placeholder	The empty-state band (editor / no image)
barbican-office-logo__img	The logo image
barbican-office-logo__monogram	The initials monogram fallback

Address · barbican/office-address

The office address with a “Get directions” link.

Class	Targets
barbican-address__body	The address block
barbican-address__street	The street line
barbican-address__meta	The city / state / postal line
barbican-address__pin	The location-pin icon
barbican-address__directions	The “Get directions” link

Contact · barbican/office-contact

Primary phone and email as click-to-contact links.

Class	Targets
barbican-contact__link	One contact link (phone or email)
barbican-contact__link-icon	The icon inside a contact link
barbican-contact__type	The label (“Call”, “Email”)

Branch offices · barbican/branch-offices

A grid of the brokerage’s branch offices.

Class	Targets
barbican-branches__grid	The card grid
barbican-branches__card	One branch card
barbican-branches__icon	The building icon
barbican-branches__name	The branch name
barbican-branches__locality	The branch city / state line
barbican-branches__mls	The branch MLS id
barbican-branches__body	The text area of a card

Broker · barbican/office-broker

The “Meet the broker” card.

Class	Targets
barbican-broker__card	The whole card
barbican-broker__portrait	The broker photo
barbican-broker__portrait--initials	The initials monogram (no photo)
barbican-broker__body	The text column
barbican-broker__name	The broker’s name
barbican-broker__title	The broker’s title
barbican-broker__bio	The bio paragraph
barbican-broker__actions	The row of action links

Agents · barbican/office-listings, barbican/agents, barbican/agents-list

The office’s listings and its team of agents. The agents blocks render in grid or list view with a view switch, driven by the same engine as the property list: barbican/agents is the full roster page (search / filter / count), and barbican/agents-list is the reusable “Our agents” section. Each placement is independently grid-or-list with its own field toggles (Job title, Designations, Languages, Phone).

Grid, one card per agent:

Class	Targets
barbican-agent-photo (--initials)	The headshot / initials monogram
barbican-agent-name	The name
barbican-agent-title	The job title
barbican-agent-desigs	Designations
barbican-agent-langs	Languages
barbican-agent-phone	Phone

List, one clickable row per agent:

Class	Targets
barbican-member-rows	The list container
barbican-member-row	One row (the whole row is the link)
barbican-member-row__media / __photo (--initials)	The portrait box / photo / initials
barbican-member-row__name / __title	The name / job title
barbican-member-row__more	The “View profile →” affordance
barbican-member-row__desigs / __langs / __phone	Designations / languages / phone

Roster-only (the barbican/agents page chrome):

Class	Targets
barbican-agents__count	The “N agents” result count
barbican-agents__search / __search-icon / __search-input	The search box / icon / input
barbican-agents__chip-row / __chip-label	A filter-chip row / its label

Note

The agents’ filter shell, chips, and card grid come from the shared list kit (barbican-filter, barbican-chip(--active), barbican-filter-result, barbican-team-grid, …), so they match the property list and the office team grid. The office name and bio are a heading and paragraph block; style them with the standard WordPress typography controls or the shared barbican-eyebrow heading hook.