Long text — an about page, a privacy notice, a service description — rendered from the RichDoc format by a pure server renderer (no editor code reaches the site). The column sits on grid columns 2–9 rather than dead centre; body headings shift one level below the block title.
How we started
Kıyı opened in 2011 as a six-table meyhane next to the Cevizli fish market. The menu was whatever the boats brought in, written on a slate by the door, and the rakı came from a cabinet behind the till.
Fifteen years later the slate is still there. So is Hüseyin Usta, who has cleaned every sea bass we’ve served, and who still refuses to put bonito on the menu before the first cold week of October.
If the fish is good, you don’t need a sauce. If it isn’t, no sauce will save it.
We now seat sixty, take bookings on WhatsApp and keep a wine list that changes every Thursday. The fish still decides the menu.
Installation
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 { RichTextSection } from "@vamos-ui/react/blocks";
<RichTextSection variant="aside-heading" title="Privacy notice" note="Last updated 4 November 2026" body={doc} />
<RichTextSection body={"First paragraph.\n\nSecond paragraph."} /> // plain text works tooExamples
Aside heading (legal)
Sticky title + note on the start side, the text on the end side.
Legal
Privacy notice
Last updated 4 November 2026
Who we are
Defne Clinic (Defne Sağlık Hizmetleri Ltd. Şti.), Bağdat Cd. 312, Suadiye, Istanbul, is the data controller for the personal data you share with us through this website.
What we collect
Your name, phone number and preferred time when you request an appointment.
Health information you choose to write in the message field — only to prepare your consultation.
Analytics cookies, only after you accept them in the consent banner.
Your rights
Under KVKK article 11 and the GDPR you can ask what we hold about you, correct it or have it deleted. Write to kvkk@lena.example; we reply within 30 days.
Two columns
Newspaper columns from 56rem; one column on phones.
How we work
Fewer pages, kept up to date
Most small-business sites fail the same way: they launch with twenty pages and nobody touches them again. The opening hours go stale, the menu PDF is from last winter, and the booking link points at a form nobody reads.
We start from the other end. Which three questions do your guests ask on the phone every day? Those become the first three pages, written in your words, with the answer in the first line.
Then we hand over the keys. Your staff edit the menu from a phone, the hours sync to Google, and a booking request lands in the WhatsApp you already answer. We check the site every Monday and fix what we find.
It is not a lot of pages. It is the right ones, true on the day a guest reads them.
API
RichTextSection
| Prop | Type | Default |
|---|---|---|
variantLayout (see examples). | "column" | "aside-heading" | "two-column" | "column" |
bodyParagraphs, h2–h4, lists, quotes, rules + bold, italic, links. Strings: blank line = paragraph. | RichDoc | string | — |
titleOptional; when set, stored h2s render as h3. | ReactNode | — |
eyebrowMono line above the title. | ReactNode | — |
dropCapcolumn: large first letter in the display font. | boolean | false |
noteaside-heading: meta line under the title. | ReactNode | — |
sizeText size of the prose. | "sm" | "md" | "lg" | "md" |
theme / anchor / id / className / labels / locale / components / editMode / headingLevelLinks go through components.Link. | BlockBaseProps | — |