ComponentsSite blocks

Media + text

The most used body section: an image or video beside text — “Our kitchen”, “How we work”, a feature deep-dive. Text is top-aligned with the image, not vertically centred. Video is a click-to-load facade (YouTube via youtube-nocookie, Vimeo with dnt, or MP4), so no third-party request happens before the visitor asks.

blocks/site/media-text.tsx, blocks/site/embed-facade.tsx, blocks/site/registry-1.ts, styles/blocks.csstheme · material · accent · density · font

A plate of grilled fish with herbs and lemon

The kitchen

Fish from the morning boats

Hüseyin Usta is at the Cevizli market at six. What he buys decides the menu — there is no printed fish list, only the slate by the door.

Sea bass, bonito and red mullet in season
Every meze made the same morning
Forty rakı labels, by the glass

Tonight’s menu

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 { MediaText } from "@vamos-ui/react/blocks";

<MediaText
  eyebrow="The kitchen"
  title="Fish from the *morning* boats"
  body="What he buys decides the menu…"
  bullets={["Sea bass in season", "Meze made the same morning"]}
  media={{ src, alt, width, height }}
  video={{ provider: "youtube", url: "https://www.youtube.com/watch?v=…" }}   // optional facade
  mediaSide="end"
/>

Examples

Overlap (boutique hotel)

The image takes 8 columns; a surface panel overlaps its corner (counts as a card section; glassy in glass mode).

A hotel room with linen bedding and morning light

Rooms

Six rooms above the garden

Linen sheets, a deep bath and windows onto the plane tree. Breakfast is served downstairs until eleven; the hammam is yours from four.

See the rooms

Bleed + video facade

The image runs to the section edge. “Play video: …” swaps in the player and moves focus to it.

Case study · 2 min

A clinic site that answers the phone

Defne Clinic took 70 calls a day asking for prices. We put the prices on the site — with VAT — and the calls dropped to twenty.

Read the case study

Alternating sides

mediaSide is logical (start / end), so RTL mirrors the page.

A therapist laying warm stones beside a massage table

01 · Hammam

Twenty minutes on the warm stone

Every treatment begins here. Steam opens the skin; a kese scrub with olive oil soap does the rest.

A treatment room with folded towels and a lit candle

02 · Treatment

Then the room you booked

Massage, facial or both. Your therapist asks before they press, and writes down what you liked for next time.

API

MediaText

Prop	Type	Default
`variant` Layout (see examples).	`"side" \| "overlap" \| "bleed"`	`"side"`
`title` Section title (h2), one emphasis.	`ReactNode`	`—`
`eyebrow` Mono line above the title.	`ReactNode`	`—`
`body` Text; stored headings shift below the title.	`RichDoc \| string`	`—`
`bullets` ≤ 6 points with accent dashes between hairlines.	`ReactNode[]`	`—`
`cta` One action.	`SiteCta`	`—`
`media` Required; also the video poster.	`ImageData`	`—`
`video` Facade → iframe / video on click.	`{ provider: "youtube" \| "vimeo" \| "mp4"; url; title? }`	`—`
`mediaSide` Logical side of the image.	`"start" \| "end"`	`"start"`
`aspect` Crop ratio (overlap uses 3:2).	`"4:5" \| "3:2" \| "1:1"`	`"4:5"`
`theme / anchor / id / className / labels / locale / components / editMode / headingLevel` labels.playVideo / video name the facade.	`BlockBaseProps`	`—`

videoEmbedUrl(video)

Prop	Type	Default
`returns` youtube-nocookie / player.vimeo.com embed URL with autoplay.	`string`	`—`

Media picker

Menu / price list