/ux
Components/Marketing/BackgroundFrame

BackgroundFrame

Marketing

Foundation layer — backdrop + overlay + accent stripe that every marketing surface composes on.

BackgroundFrame is the primitive every marketing surface composes on. It layers (in order): brand backdrop, optional image, overlay tint, optional accent stripe, and content. It owns the visual "stage" — HeroBanner, CTACard, FeatureCard, SplitCTA, and AdUnit all build on top.

Usage

import { BackgroundFrame } from "nosible-ux"

export default function Example() {
  return (
    <BackgroundFrame
      tier="obsidian"
      border="accent"
      overlay="gradient-bottom"
      accentStripe
      src="/brand/hero.jpg"
      alt=""
      className="aspect-[2/1]"
    >
      <div className="p-6 text-ghost">Signal, structured.</div>
    </BackgroundFrame>
  )
}

Examples

Tiered backdrops

obsidian
slate
bare

Accent stripe + overlay

Accent stripe + left-gradient overlay

Composition

BackgroundFrame is the building block for every other marketing component. When composing your own surface, reach for this before a raw div.

Props

Name TypeDefaultDescription
accentStripe
boolean | undefined—Adds a 2 px Neo Green left stripe — brand signal accent.
alt
string | undefined—Accessible description of the backdrop. Required when `src` is set and the backdrop conveys meaning; pass `""` when decorative.
asChild
boolean | undefined—When true, merges styles onto the child element instead of rendering a `<div>`.
blend
"normal" | "multiply" | "screen" | "luminosity" | "overlay" | undefined—Optional blend mode applied to the backdrop — use sparingly.
border
"strong" | "none" | "accent" | "thin" | null | undefined—
fit
"fill" | "cover" | "contain" | undefined—How the backdrop image should fit its container. Default: `"cover"`.
overlay
"strong" | "none" | "soft" | "medium" | "solid" | "gradient-top" | "gradient-bottom" | "gradient-left" | "gradient-right" | "gradient-diagonal" | undefined—Overlay painted over the backdrop. Default: `"medium"` when `src` is set, else `"none"`.
position
"center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | undefined—Where the backdrop focal point sits. Default: `"center"`.
src
string | undefined—Backdrop image URL — illustration or share-cover. Omit to render a solid tier.
tier
"obsidian" | "slate" | "bare" | null | undefined—
← All ComponentsGetting Started →