ShareCoverImage

Renders the commissioned share cover artwork. Two variants are shipped:

• default — primary illustration (tight composition, highest-impact).
• v2 — alternative framing from the same set.

Intended for both in-page use and for OpenGraph / social metadata, where referencing the URL constant directly is usually preferable to rendering an <img>.

Usage

import { ShareCoverImage, SHARE_COVER_URL_DEFAULT } from "nosible-ux"

// In-page render
<ShareCoverImage alt="Nosible — deep-search illustrated" />

// Next.js metadata
export const metadata = {
  openGraph: { images: [SHARE_COVER_URL_DEFAULT] },
}

Examples

Default and v2

PreviewCode

With a custom src override

PreviewCode

URL constants

import {
  SHARE_COVER_URL_DEFAULT,   // "/brand/share-cover-1.png"
  SHARE_COVER_URL_V2,        // "/brand/share-cover-2.png"
  SHARE_COVER_URLS,          // { default: ..., v2: ... }
  SHARE_COVER_DIMENSIONS,    // { width: 1200, height: 630 }
} from "nosible-ux"

The URL constants point at paths the consuming application must serve from its public/ directory. Copy the source PNGs from nosible-ux/src/assets/share-covers/ into public/brand/, or pass src to override.

Accessibility

The alt prop is required. Use a short descriptive phrase — e.g. "Nosible — deep-search illustrated" — rather than "share cover image".

Props