Skip to main content
OptiTech

Blocks · OT_PractitionerListingBlock

PractitionerListingBlock

CMS-driven, vertical-agnostic people directory pulled from Practitioner Profiles. Grid (cards) or list (rows) layout, client-side search across name / credentials / specialty, and three multi-select filters — specialty, location, and language — derived dynamically from the loaded set, never a fixed list. Values OR within a filter and AND across filters. Scope it to one vertical with the Group Tag Filter (e.g. "medical"). Squared portraits with a chromatic brand bloom and a designed initials fallback. In production, practitioners are fetched at render time; the showcase uses static fixtures spanning medical, legal, and technology verticals.

In production, practitioners are fetched at render time from Practitioner Profiles, scoped by the Group Tag Filter. The showcase uses static fixtures across three verticals so every filter and empty state is exercisable. Search by a name (“Vargas”) or a specialty (“tax”); the specialty, location, and language dropdowns list only values present in the loaded set, with multiple selections allowed per filter.

Grid · 3 columns · canvas · search + filters

The full directory experience. All eight practitioners loaded with no group-tag scope; the specialty, location, and language dropdowns are derived from the data. Portrait-first cards: the headshot (or its branded-abstract initials plate) fills a 3:4 plate. Hover a card to lift it and slide the glass footer up, revealing a bio excerpt.

Find a practitioner

Search our directory by name or specialty, or filter by specialty, location, and language.

8 profiles

Grid · 4 columns · surface · no search / no filters · scoped to medical

The curated “Meet the Team” use case on a vertical page: Group Tag Filter restricts the set to one group and the filter UI is suppressed.

List · canvas · search + filters

The compact list layout: a circular portrait thumbnail with a chromatic brand ring, name + credentials as one unit, title · primary area beneath, inline contact, and a chevron link affordance. Hover a row to bring its border to brand with a faint brand wash and slide the chevron right.

Grid · 2 columns · surface · no search / no filters · scoped to technology

The “Leadership Team” / “Executive Bios” use case on a brand or about page. Two columns give each portrait more width, so the plate reads at its most dramatic — and the glass footer and initials gradient stay legible on the surface ground. One headshot, one initials plate.