StudioHead

The top of a studio's booking page, the same on the live page and in setup's preview: the studio's mark, its name in display type, its craft and Instagram handle as badges in one row, and the address under them, then the phone to call with a tap.

Everything known

Belaze

Barbershop@pele.belaze

Terézie Vansovej 3347/4A, Prievidza

+421 905 123 456

import { StudioHead } from "@/components/shared/studio-head";

<StudioHead
  name="Belaze"
  craft="Barbershop"
  instagram="pele.belaze"
  address="Terézie Vansovej 3347/4A, Prievidza"
  phone="+421905123456"
/>

With its rating

Its clients' average from the last 12 months, every rating counted, once there are five; the studio can hide it, never curate it. Stars and count only: no client's words.

Belaze

4.8·37 verified visits

Barbershop

<StudioHead
  name="Belaze"
  craft="Barbershop"
  rating={{ value: "4.8", label: "37 verified visits" }}
/>

Before a name

In setup, the name's place is held faint and the logo's by a quiet tile; whatever else isn't known is left out.

Your studio

<StudioHead name={null} placeholder="Your studio" />

API reference

Prop	Type	Default	Description
name	string \| null	—	The studio's name; its first letter is the mark without a logo.
placeholder	string	—	Shown faint in the name's place until there is one.
logo	string \| null	—	The logo's URL (see StudioMark).
craft / instagram / address	string \| null	—	The craft in words and the handle (without @) as badges; the address under them. Each is left out when missing.
phone	string \| null	—	E.164, under the address: a ghost sm ButtonLink to tel: with a phone icon (40px on touch), grouped in threes for SK and CZ numbers.
rating	{ value, label }	—	Its clients' rating under the name, in the reader's words: a filled star, the average, the count of verified visits.
heading	"h1" \| "p"	"p"	h1 where the name is the page's heading — the live page, not embedded or in the preview.
className	string	—	Layout only.

Guidelines

The preview is the source of truth: the live page renders this same head, so the two never drift.