--- title: E-posta üstbilgi description: Header for outbound website emails. --- Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur. ## Shared concepts ### Decoration & visibility (BlockShell) Most blocks share one reusable shell: visibility rules and decoration live on the same prop set, not as separate block types. Blocks that use BlockShell list these fields at the end of their Fields section. Visibility controls who/where the block appears (breakpoints, locales, auth, route lock, roles). Decoration controls spacing, background, border, shadow, motion, and related chrome around the block content. #### Fields ##### Visibility ###### `showOnBreakpoints` Per-breakpoint visibility. Set a breakpoint to `false` to hide the block on that viewport. Missing keys default to visible. ``` showOnBreakpoints: { mobile: false } ``` ###### `showOnLocales` Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to `false` to hide. ``` showOnLocales: { tr: false } ``` ###### `authVisibility` Who can see the block based on website sign-in state. Options: `all`, `authenticated`, `anonymous` ``` authVisibility: "authenticated" ``` ###### `routeLockVisibility` On locked object routes, show always, only when unlocked, or only when locked. Options: `all`, `when_unlocked`, `when_locked` ``` routeLockVisibility: "all" ``` ###### `roleVisibility` Optional list of website user role labels. Empty means all roles. Matching is case-sensitive. ``` roleVisibility: ["moderator"] ``` ###### `entryActionVisibility` Object-component only: show when the current entry exposes matching actions. Options: `all`, `canUpdate`, `canDelete` ``` entryActionVisibility: "all" ``` ###### `queryPageVisibility` Optional: limit list blocks to the first query page only. Options: `all`, `first_page_only` ``` queryPageVisibility: "all" ``` ##### Spacing & sizing ###### `customizeEnabled` Enables the decoration controls below in the editor. ``` customizeEnabled: true ``` ###### `paddingEnabled` Turns padding controls on for this block. ``` paddingEnabled: true ``` ###### `padding` Unit: `token` Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language. Options: `none`, `xs`, `sm`, `md`, `lg`, `xl` ``` padding: "md" ``` ###### `paddingByBreakpoint` Unit: `token` Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes. ``` paddingByBreakpoint: { desktop: "md", mobile: "sm" } ``` ###### `marginsEnabled` Turns margin controls on (configured via size/position maps). ``` marginsEnabled: false ``` ###### `sizeByBreakpoint` Optional width/height constraints per breakpoint. Modes: `fillParent` (stretch), `fitContent` (intrinsic), `static` (fixed length via `widthStatic`/`heightStatic` + unit), `ratio` (percent of the other axis via `widthRatio`/`heightRatio`). `static` uses `widthStaticUnit` / `heightStaticUnit`: `px`, `vw`, `vh`, `vmin`, or `vmax` (default `px`). Example full-page background: `widthStatic: 100`, `widthStaticUnit: "vw"`, `heightStatic: 100`, `heightStaticUnit: "vh"` with fixed positioning and `pointerEvents: "none"`. `ratio` values are percentages of the opposite axis. `fillParent` and `fitContent` take no numeric unit. ``` sizeByBreakpoint: { desktop: { widthMode: "static", widthStatic: 100, widthStaticUnit: "vw", heightMode: "static", heightStatic: 100, heightStaticUnit: "vh" } } ``` ###### `overflow` CSS overflow on the decoration frame. Options: `visible`, `hidden`, `auto`, `clip` ``` overflow: "hidden" ``` ###### `pointerEvents` Whether the decoration frame receives pointer events. Use `none` for full-page decorative backgrounds so clicks pass through. Options: `auto`, `none` ``` pointerEvents: "auto" ``` ##### Position ###### `positionEnabled` Enables absolute/relative positioning overlays. ``` positionEnabled: false ``` ###### `positionByBreakpoint` Positioning overlays per breakpoint (`static`, `relative`, `absolute`, `fixed`, `sticky`) with optional offsets in pixels (`top`, `right`, `bottom`, `left`). ``` positionByBreakpoint: { desktop: { position: "relative", top: 0, left: 0 } } ``` ##### Background ###### `backgroundEnabled` Enables background fill, gradient, or image. ``` backgroundEnabled: true ``` ###### `backgroundWidth` Background span: page column or full viewport bleed. Options: `page`, `full` ``` backgroundWidth: "page" ``` ###### `backgroundKind` Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid). Options: `solid`, `gradient`, `image`, `video`, `animation` ``` backgroundKind: "solid" ``` ###### `backgroundColorLight` Solid background color in light theme. ``` backgroundColorLight: "#ffffff" ``` ###### `backgroundColorDark` Solid background color in dark theme. ``` backgroundColorDark: "#111827" ``` ###### `gradientType` Linear, radial, or conic gradient when `backgroundKind` is `gradient`. Options: `linear`, `radial`, `conic` ``` gradientType: "linear" ``` ###### `gradientAngle` Unit: `deg` Linear gradient direction or conic start angle in degrees when `backgroundKind` is `gradient`. ``` gradientAngle: 135 ``` ###### `gradientColors` Gradient stops with light/dark pairs and segment offsets (CSS % is the running sum). ``` gradientColors: [ { light: "#2563eb", dark: "#1e3a8a", offset: 20 }, { light: "#93c5fd", dark: "#1e40af", offset: 80 } ] ``` ###### `backgroundImageSrc` Background image source when `backgroundKind` is `image`. ``` backgroundImageSrc: "https://cdn.example/bg.jpg" ``` ###### `backgroundImageMode` How the background image is sized. Options: `cover`, `contain`, `repeat` ``` backgroundImageMode: "cover" ``` ###### `backgroundRepeatSize` Unit: `px` Tile size in pixels when background image mode is `repeat`. ``` backgroundRepeatSize: 64 ``` ###### `backgroundPosition` CSS background-position value. ``` backgroundPosition: "center" ``` ###### `backgroundMotionEnabled` Seamless pan (and optional rotate) for image backgrounds. ``` backgroundMotionEnabled: true ``` ###### `backgroundMotionDirectionDeg` Unit: `deg` Pan direction in degrees (0 = right). ``` backgroundMotionDirectionDeg: 0 ``` ###### `backgroundMotionSpeed` Relative pan speed for seamless cycling. ``` backgroundMotionSpeed: 20 ``` ###### `backgroundMotionRotateDegPerSec` Unit: `deg` Continuous rotation speed in degrees per second (0 = off). ``` backgroundMotionRotateDegPerSec: 0 ``` ###### `backgroundVideoSrc` Video URL when `backgroundKind` is `video`. Always muted, autoplay, plays inline; never captures focus. ``` backgroundVideoSrc: "https://cdn.example/bg.mp4" ``` ###### `backgroundVideoFit` `cover` / `fill` use object-fit; `repeat` tiles frames on canvas. Options: `cover`, `fill`, `repeat` ``` backgroundVideoFit: "cover" ``` ###### `backgroundVideoLoop` Loop the background video (default true). ``` backgroundVideoLoop: true ``` ###### `backgroundAnimationMode` Particle field or reactive grid (filled cells or continuous outlines) when `backgroundKind` is `animation`. Options: `particle`, `reactiveGrid` ``` backgroundAnimationMode: "particle" ``` ###### `backgroundAnimShape` Built-in shape or custom SVG for particles/grid cells. Options: `circle`, `square`, `roundedSquare`, `triangle`, `diamond`, `hexagon`, `star`, `cross`, `svg` ``` backgroundAnimShape: "circle" ``` ###### `backgroundAnimSvgSrc` SVG URL when shape is `svg`. ``` backgroundAnimSvgSrc: "https://cdn.example/shape.svg" ``` ###### `backgroundAnimColorMode` `solid` tints shapes; `fromAsset` keeps SVG colors. Options: `solid`, `fromAsset` ``` backgroundAnimColorMode: "solid" ``` ###### `backgroundAnimSize` Unit: `px` Base particle or cell size in pixels. ``` backgroundAnimSize: 12 ``` ###### `backgroundAnimJitter` Particle-only 0–1 randomization for count, size, lifetime, and speed. ``` backgroundAnimJitter: 0.2 ``` ###### `backgroundGridStyle` Reactive grid rendering: filled `cells`, or `continuous` shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for `svg` shapes, which always render as cells. Options: `cells`, `continuous` ``` backgroundGridStyle: "cells" ``` ###### `backgroundGridHoverGrowLimitPct` Unit: `%` Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of `50` reaches 150% scale after the configured reaction time. ``` backgroundGridHoverGrowLimitPct: 50 ``` ###### `backgroundGridHoverRotateLimitDeg` Unit: `deg` Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise. ``` backgroundGridHoverRotateLimitDeg: 0 ``` ###### `backgroundGridReactionTimeSec` Unit: `s` Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves. ``` backgroundGridReactionTimeSec: 1 ``` ##### Border ###### `borderEnabled` Enables border color, style, width, and radius. ``` borderEnabled: false ``` ###### `borderColorLight` Border color in light theme. ``` borderColorLight: "#e5e7eb" ``` ###### `borderColorDark` Border color in dark theme. ``` borderColorDark: "#374151" ``` ###### `borderStyle` CSS border style. Options: `solid`, `dashed`, `dotted` ``` borderStyle: "solid" ``` ###### `borderWidth` Unit: `token` Border width token. Options: `none`, `sm`, `md`, `lg` ``` borderWidth: "sm" ``` ###### `borderRadius` Unit: `token` Border radius token. Options: `none`, `sm`, `md`, `lg`, `xl`, `full` ``` borderRadius: "md" ``` ##### Shadow ###### `shadowEnabled` Enables box shadow values for light/dark themes. ``` shadowEnabled: false ``` ###### `shadowValueLight` CSS box-shadow value in light theme. ``` shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)" ``` ###### `shadowValueDark` CSS box-shadow value in dark theme. ``` shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)" ``` ##### Motion & transform ###### `scrollAnimationEnabled` Enables enter-on-scroll animation. ``` scrollAnimationEnabled: false ``` ###### `scrollAnimationType` Enter-on-scroll animation preset. Options: `fadeIn`, `slideInBottom`, `slideInTop`, `slideInLeft`, `slideInRight`, `zoomIn`, `zoomOut`, `rotateIn`, `rotateOut`, `bounceIn`, `bounceOut`, `pulse` ``` scrollAnimationType: "fadeIn" ``` ###### `scrollAnimationDuration` Unit: `ms` Animation duration in milliseconds. ``` scrollAnimationDuration: 600 ``` ###### `scrollAnimationDelay` Unit: `ms` Animation delay in milliseconds. ``` scrollAnimationDelay: 0 ``` ###### `cursorTiltEnabled` Tilts the block slightly toward the pointer. ``` cursorTiltEnabled: false ``` ###### `cursorTiltIntensity` Strength of the cursor tilt effect. ``` cursorTiltIntensity: 8 ``` ###### `transformEnabled` Enables CSS transform controls. ``` transformEnabled: false ``` ###### `transformRotateX` Unit: `deg` Rotation around the X axis in degrees. ``` transformRotateX: 0 ``` ###### `transformRotateY` Unit: `deg` Rotation around the Y axis in degrees. ``` transformRotateY: 0 ``` ###### `transformRotateZ` Unit: `deg` Rotation around the Z axis in degrees. ``` transformRotateZ: 0 ``` ###### `transformTranslateX` Unit: `px` Horizontal translation in pixels. ``` transformTranslateX: 0 ``` ###### `transformTranslateY` Unit: `px` Vertical translation in pixels. ``` transformTranslateY: 0 ``` ###### `transformTranslateZ` Unit: `px` Depth translation in pixels. ``` transformTranslateZ: 0 ``` ###### `transformScale` Unit: `ratio` Uniform scale factor (unitless). ``` transformScale: 1 ``` ###### `transformPerspective` Unit: `px` CSS perspective distance in pixels. ``` transformPerspective: 800 ``` ##### Advanced ###### `decorationBySelector` Advanced: apply decoration token overlays for `hover`, `active`, and `focus`. Missing overlay keys inherit the default flat props. ``` decorationBySelector: { hover: { backgroundColorLight: "#f3f4f6" } } ``` ###### `clipboard` _Editor-only control — does not persist its own value._ Editor-only copy/paste helpers for block props. ``` // Editor-only — does not persist a stored value ``` #### Examples **Hide on mobile** ```json { "showOnBreakpoints": { "mobile": false } } ``` **Signed-in only + light padding** ```json { "authVisibility": "authenticated", "customizeEnabled": true, "paddingEnabled": true, "padding": "md" } ``` ### Rich text ## Storage Rich text props are TipTap HTML **strings**, not slots and not a separate `html` key. Example: `content: "

Hello world

"`. Empty content is typically an empty string or a minimal empty paragraph from the editor. ## Editor features The shared TipTap stack (admin Puck + public forms) includes: - Headings levels 1–6 - Bold, italic, strike, and related StarterKit marks/nodes (paragraphs, lists, blockquotes, hard breaks) - Links (insert/edit/remove via the toolbar modal) - Text color, font family, and font size (px) — inline spans, so any selection can differ - Tables (insert/add/remove rows and columns) - Images from the file library (base64 embeds are not allowed) - YouTube embeds and Google Maps embeds Some surfaces (e.g. lifecycle email bodies) add extra extensions such as field-binding chips; those only appear where that editor enables them. ## Public render Published HTML is rendered with the shared `.rich-text` styles (and related puck rich-text CSS) so headings, lists, tables, and embeds match the editor. Theme typography and colors still come from the website theme where CSS variables apply. ## Where rich text appears - **RichTextBlock** — `content` HTML body on pages and chrome - **ButtonBlock** / **ButtonLink** — `text` label as HTML (often a short paragraph) - **ObjectBoundRichText** — binds an object schema `richText` field into the page - Object schema type `richText` and admin/public **SharedRichTextField** forms use the same extension stack ## Authoring & MCP guidance - Keep first-viewport copy short; put long articles in object fields and bind them with ObjectBoundRichText. - Always write the HTML into the documented prop (`content`, `text`, or `overlay`) — do not invent an `html` prop. - Locale overlays localize these HTML strings like other localizable props; the modal Name field is not rich text and is not localized. - Prefer semantic HTML TipTap already emits (`

`, `

`, `