Components/Marketing/AdUnit

AdUnit

Marketing

Fixed-dimension ad creative — 11 platform presets (LinkedIn, Reddit, X, Meta) for PNG export.

Fixed-dimension ad creative. Eleven platform presets cover LinkedIn, Reddit, X, and Meta. Each preset renders at its exact platform dimensions via inline style={{ width, height }}, so Playwright or a headless browser can screenshot the rendered element to produce ready-to-upload PNGs.

See the full gallery at /docs/ads.

Presets

Platform	Preset	Dimensions
LinkedIn	`linkedinLandscape`	1200 × 627
LinkedIn	`linkedinSquare`	1080 × 1080
LinkedIn	`linkedinStory`	1080 × 1920
Reddit	`redditLink`	1200 × 628
Reddit	`redditSquare`	1200 × 1200
Reddit	`redditMrec`	300 × 250
X	`xLandscape`	1600 × 900
X	`xSummary`	1200 × 675
Meta	`metaSquare`	1080 × 1080
Meta	`metaPortrait`	1080 × 1350
Meta	`metaStory`	1080 × 1920

Usage

import { AdUnit } from "nosible-ux"

export default function Example() {
  return (
    <AdUnit
      preset="linkedinLandscape"
      eyebrow="RESEARCH DESK · v1.0"
      headline="Build at the speed of signal"
      subhead="Live market context, AI-native research, one surface."
      cta="Request access"
      data-ad-id="linkedin-landscape"
    />
  )
}

Examples

Square (LinkedIn / Meta / Reddit)

NOSIBLE

JOIN THE LAUNCH COHORT

Signal, structured

From tick to thesis in under 400 ms.

Get access

MREC (300×250)

NOSIBLE

Nosible v1.0

Signal-native research

Try it

Manual dimensions

For platforms not covered by a preset, pass explicit width, height, and layout:

<AdUnit
  width={600}
  height={500}
  layout="square"
  headline="Custom slot"
/>

PNG export

Every AdUnit carries data-ad-id plus role="img" + aria-label={headline}. The bundled export:ads script loops every preset, sets the viewport to the exact platform dimensions, and screenshots the locator:

pnpm --filter nosible-ux-website export:ads
# → ads-export/<preset>.png

Props

Name	Type	Default	Description
`accentStripe`	`boolean \| undefined`	—	Adds a 2 px Neo Green left stripe — brand signal accent. Default: `true` for dark tones.
`anchor`	`"center" \| "top-left" \| "top-center" \| "top-right" \| "center-left" \| "bottom-left" \| "bottom-center" \| "bottom-right" \| undefined`	—	Where the content stack anchors inside the frame. Default: `"bottom-left"`.
`asChild`	`boolean \| undefined`	—	When true, merges styles onto the child element instead of rendering a `<div>`.
`backgroundAlt`	`string \| undefined`	—	Alt text for the backdrop — ad units are static creative so keep descriptive for cataloguing.
`backgroundFit`	`"fill" \| "cover" \| "contain" \| undefined`	—	Backdrop fit. Default: `"cover"`.
`backgroundPosition`	`"center" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top" \| "bottom" \| "left" \| "right" \| undefined`	—	Backdrop focal point. Default: `"center"`.
`backgroundSrc`	`string \| undefined`	—	Backdrop image URL — illustration or share-cover.
`cta`	`ReactNode`	—	Non-interactive CTA label rendered as a filled chip. Pass `null` to hide.
`data-ad-id`	`string \| undefined`	—	Extra data attribute used by PNG export tooling to locate ads on a gallery page.
`eyebrow`	`ReactNode`	—	Optional pre-headline label (Space Mono, uppercase, tracked).
`headline`	`ReactNode`	—	Primary headline — Space Grotesk. Required.
`height`	`number \| undefined`	—	Exact export height in CSS pixels. Required when `preset` is not set.
`layout`	`AdLayout \| undefined`	—	Layout archetype — drives typography / padding. Required when `preset` is not set.
`logo`	`ReactNode`	—	Logo node rendered in the corner. Defaults to the Nosible wordmark.
`overlay`	`"strong" \| "none" \| "soft" \| "medium" \| "solid" \| "gradient-top" \| "gradient-bottom" \| "gradient-left" \| "gradient-right" \| "gradient-diagonal" \| undefined`	—	Overlay painted over the backdrop. Default: `"gradient-bottom"` when backdrop is set, else `"none"`.
`preset`	`"linkedinLandscape" \| "linkedinSquare" \| "linkedinStory" \| "redditLink" \| "redditSquare" \| "redditMrec" \| "xLandscape" \| "xSummary" \| "metaSquare" \| "metaPortrait" \| "metaStory" \| undefined`	—	Preset key — auto-fills `width`, `height`, and `layout`. Override individual props below to customise.
`subhead`	`ReactNode`	—	Optional supporting copy.
`tone`	`"obsidian" \| "slate" \| "accent" \| undefined`	—	Base colour of the ad frame. Default: `"obsidian"`.
`width`	`number \| undefined`	—	Exact export width in CSS pixels. Required when `preset` is not set.

← All Components Getting Started →