ComponentsSite blocks

Team

Team and specialist introductions — spa therapists, clinic doctors, an agency team. Card-less: 4:5 portraits with a name and a small mono role, a typographic list with a hover portrait, or a founder feature with the name set like a signature. Honorifics (“Dr.”, “Op. Dr.”) are a separate field because their order varies by locale. Profile links are short text links, never rows of social icons.

blocks/site/team.tsx, blocks/site/registry-2.ts, styles/blocks.csstheme · material · accent · density · font

Therapists

Hands you can trust

Every therapist at Hamam Moda has at least eight years of practice. Book any of them by name.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Team } from "@vamos-ui/react/blocks";

<Team
  title="Hands you can *trust*"
  members={[
    { name: "Elif Aydın", role: "Lead therapist", photo: { src, alt, width: 800, height: 1000 } },
    { name: "Selin Öztürk", title: "Dr.", role: "Dermatologist", links: [{ network: "linkedin", href: "…" }] },
  ]}
/>

Examples

List with hover portrait (clinic)

Name · role · specialty rows; on wide screens a decorative portrait appears on hover (CSS only); phones get a small leading portrait.

Clinic

Our specialists

  • Dr. Selin Öztürk in a white coat

    Dr. Selin Öztürk

    Dermatologist

    Acne scars · Laser · Microneedling

    LinkedIn (opens in a new tab)
  • Kerem Yıldız by the studio window

    Op. Dr. Kerem Yıldız

    Plastic surgeon

    Rhinoplasty · Blepharoplasty

  • Elif Aydın in a linen apron, smiling

    Elif Aydın

    Aesthetician

    Facials · Chemical peels

  • Mert Kaya in the hammam, arms folded

    Mert Kaya

    Physiotherapist

    Lymphatic drainage · Post-op care

Feature (founder)

5/7 layout, long bio (blank line = new paragraph), signature-style name. One member always renders as feature.

Kerem Yıldız by the studio window

Founder

Started in a one-room studio

Kerem designed his first restaurant website in 2011 for his uncle’s fish place in Ayvalık. It took bookings by email and crashed every Friday.

Fifteen years later the studio builds sites and booking systems for forty restaurants, spas and clinics across Istanbul — still from the same desk by the window in Maltepe.

Kerem Yıldız

Founder, creative director

LinkedIn (opens in a new tab)X (opens in a new tab)

API

Team

PropTypeDefault
variant
Layout.
"portrait" | "list" | "feature""portrait"
members
{ name, title?, role, specialty?, photo?, bio?, links? }. No photo = an empty inset area, never initials.
TeamMember[]—
members[].links
Up to 3, rendered as text (“LinkedIn”) with an aria-label “Elif Aydın on LinkedIn”.
{ network: SocialNetwork; href }[]—
eyebrow / title / lead
Section header (split alignment in portrait).
ReactNode—
labels / locale
profileOf template.
Partial<Site2Labels> / string—
theme / anchor / id / className / headingLevel / components / editMode
Shared block props.
BlockBaseProps—
Previous
Task list
Next
Testimonials