@pagix/banner

A Puck-native banner block. The background can be an image, a video, or a solid color, configured via a single background object field.

Install

pnpm add @pagix/banner @anvilkit/ui @puckeditor/core

Styles

Import the package stylesheet once at the app entry (before any Banner renders):

import "@pagix/banner/styles.css";

Quickstart

import "@pagix/banner/styles.css";
import { Banner, componentConfig, defaultProps } from "@pagix/banner";

const config = {
	components: { Banner: componentConfig },
};

const data = {
	root: { props: {} },
	content: [
		{
			props: {
				...defaultProps,
				headline: "Build something beautiful.",
				background: { type: "color", color: "#1a1814" },
			},
			type: "Banner",
		},
	],
};

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | eyebrow | string | — | Optional small label above the headline. | | headline | string | required | Main heading. | | subtitle | string | — | Optional paragraph under the headline. | | primaryLabel / primaryHref / primaryOpenInNewTab | string | — | Primary CTA. Hidden if primaryLabel is empty. | | secondaryLabel / secondaryHref / secondaryOpenInNewTab | string | — | Secondary CTA. Hidden if secondaryLabel is empty. | | background | object | required | { type, imageUrl?, videoUrl?, color? } | | textAlign | "left" \| "center" | "center" | — | | textColor | "auto" \| "light" \| "dark" | "light" | Color of the foreground text. | | overlayOpacity | number (0-100) | 40 | Dark overlay strength when background is image/video. | | minHeight | number (px) | 480 | Minimum height in CSS pixels. | | classNames | Record<string, string> | — | Tailwind passthrough per style target. | | animation | AnimationProps | — | Entrance animation (see authoring.ts). |

Edit mode

In the Puck editor, all interactive elements (links, buttons) are disabled so authors don't trigger navigation while editing. Rendered output outside the editor behaves normally.