Block Reference

This is the reference for Barbican’s public blocks: for each one, the controls it offers and the complete list of CSS hooks you can style. If you’re new to how Barbican blocks work — what they are and the three layers of customization — start with Blocks & customization; this section is the per-block detail that guide funnels into.

How the hooks work

Every part of every block carries a class you can target from your own CSS. The classes follow BEM and are all namespaced with the barbican- prefix — the same prefix the rendered HTML uses — so they never collide with your theme or another plugin:

barbican-<block>                       /* the block root */
barbican-<block>__<part>               /* a part of the block */
barbican-<block>__<part>--<variant>    /* a variant of a part */

Add your overrides in Appearance → Editor → Styles → Additional CSS, or in your theme’s stylesheet. To scope a rule to one placement rather than every instance of a block, add your own class in that block’s Advanced → Additional CSS class(es) field and target that.

Recolour everything at once

Before reaching for an individual hook, know that the blocks derive their chrome — text, muted labels, hairlines, surfaces, and the accent — from a few custom properties. Set these on a block (or the page’s .barbican-root) and the whole public site recolours together:

Property	Role
--barbican-brand	Your accent colour (also set per-block as the Brand control)
--barbican-fg	Foreground / text colour
--barbican-bg	Background colour
--barbican-muted, --barbican-faint, --barbican-hairline, --barbican-surface	Derived greys — override to fine-tune

A shared element, barbican-eyebrow, styles the small uppercase label at the top of most sections; every block with a header also exposes its own heading hook if you want to style just one.

Signals stay fixed

A few colours are deliberately not brand styling: the status pill (Active is green), the price-drop tag (a cut is red), and the highlight chips are signals, so they keep their meaning whatever palette you choose. You can still override them via their hooks if you insist.

The blocks

Barbican’s blocks are grouped here by the surface they usually live on:

• Listing card — the flagship browse-page tile: field toggles + every hook.
• Property page — the single-listing detail blocks (gallery, headline, map, rooms, spec, and more).
• Office page — the brokerage profile blocks.
• Agent page — the agent profile blocks.
• Open houses — the agenda and the single-event blocks.
• Contact pages — the signed-in contact’s Profile, My Listings, and My Notes.
• Shared sections — social links, phone lists, licenses, and associations, used on more than one page.