ComponentsSite blocks

Ad slot

A labelled advertising slot (“Advertisement” / “Reklam”). The box is reserved at its final ratio before anything loads, so the page never jumps (no CLS), and it scales down with its column. The ad markup renders — and onReady, the hook point for an ad server, fires — only after the visitor grants the consent category (marketing by default, read from the kit ConsentBanner cookie and updated live). House ads that track nothing pass consent={false}. An aside landmark named by its label.

blocks/site/ad-slot.tsx, blocks/site/shared/news.tsx, blocks/site/shared/consent.ts, styles/blocks.csstheme · material · accent · density · font

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

<AdSlot size="leaderboard" mobileSize="mobile-banner" slotId="div-gpt-home-top"
  onReady={(el) => googletag.cmd.push(() => googletag.display(el.id))} />

<AdSlot size="rectangle" consent={false}><HouseAd /></AdSlot>

AdSlot

Prop	Type	Default
`size` leaderboard 728×90 · billboard 970×250 · large-leaderboard 970×90 · rectangle 300×250 · half-page 300×600 · skyscraper 160×600 · mobile-banner 320×50 · large-mobile-banner 320×100 · { width, height }.	`AdSize`	`"rectangle"`
`mobileSize` Box below a 40rem container.	`AdSize`	`—`
`children` The creative; rendered only with consent.	`ReactNode`	`—`
`consent` Category that must be granted. false: house ads.	`ConsentCategory \| false`	`"marketing"`
`consentVersion` Older stored answers don't count.	`number`	`—`
`onReady` Runs once consent is granted, with the inner element (id = slotId).	`(el) => void \| cleanup`	`—`
`slotId` Id of the inner element ad servers target.	`string`	`—`
`placeholder` Shown in the empty box.	`ReactNode`	`—`
`label` Visible label above the box (keep it; ads must be recognisable).	`ReactNode \| false`	`"Advertisement"`
`center` Centre in the column.	`boolean`	`true`

Activity timeline

Address field