ComponentsSite blocks

Page intro

The h1 and breadcrumb of an inner page — About, Services, Contact — where a hero is too heavy. Breadcrumb as a labelled nav with aria-current, and BreadcrumbList JSON-LD from the same data. Server component.

blocks/site/page-intro.tsx, blocks/site/registry-1.tstheme · material · accent · density · font

Hammam rituals, by the hour

Every ritual starts with twenty minutes on the warm stone. Prices include VAT and a pot of linden tea afterwards.

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 { PageIntro, breadcrumbJsonLd, JsonLd } from "@vamos-ui/react/blocks";

const crumbs = [{ label: "Home", href: "/" }, { label: "Treatments" }];
<PageIntro breadcrumb={crumbs} title="Treatments, *by the hour*" lead="…" />
<JsonLd data={breadcrumbJsonLd(crumbs, "https://hamam.example")} />   // the renderer does this for you

Examples

With media

A 21:9 image bleeding past the container, loaded with priority.

Nine people, one long table

We’ve worked from the same office in Cevizli since 2014. Clients visit; we visit them more.

Four people reviewing a site layout on a laptop

Ruled

Up to three facts behind a vertical rule, a full-width hairline below.

Massage at home

A therapist, a folding table and warm towels at your door within the day.

Service area: Asian side, Kadıköy to Pendik
From: ₺2,800 · 60 minutes
Book by: 14:00 for the same evening

API

PageIntro

Prop	Type	Default
`variant` Layout (see examples).	`"simple" \| "with-media" \| "ruled"`	`"simple"`
`breadcrumb` Ancestors first; the last crumb is the current page (aria-current="page"). Separators mirror in RTL.	`{ label; href? }[]`	`—`
`eyebrow` Shown instead of the breadcrumb when there is none.	`ReactNode`	`—`
`title` The h1. One emphasis.	`ReactNode`	`—`
`lead` Beside the title on wide containers.	`ReactNode`	`—`
`media` with-media: the 21:9 image.	`ImageData`	`—`
`meta` ruled: up to 3 facts.	`SiteMeta[]`	`—`
`headingLevel` The renderer gives the page's first intro block h1.	`1 \| 2 \| 3`	`1`
`theme / anchor / id / className / labels / locale / components / editMode` labels.breadcrumb names the nav.	`BlockBaseProps`	`—`

breadcrumbJsonLd(crumbs, origin?)

Prop	Type	Default
`returns` A BreadcrumbList node; the current page has no item URL.	`object \| null`	`—`

Page header

Pagination