HOC SiteDocumentation

Field options

Shared enum and select values used across design blocks, presentation, action, visibility, and more.

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

presentation

Presentation. How repeating media or list items are laid out on the page.

Used by fields: presentation, listLayout, displayMode

  • gallery — Static multi-item grid (or gallery) layout.
  • slider — Carousel / slider that advances through items.
  • grid — Object list layout: items arranged in a CSS grid.

action

Button action. What happens when a visitor activates a button or button link. action.kind defaults to navigate only when requestName is empty. requestName without kind runs that named request: runMutation for create or update, otherwise runRequest.

Used by fields: action, kind

  • navigate — Follow the configured URL / route.
  • copyEntryLink — Copy the current object entry link to the clipboard.
  • shareSocial — Open a share flow for the selected social network.
  • websiteUserSignOut — Sign the website user out of the site session.
  • notifications — Open or focus the notifications UI for signed-in users.
  • updateVariables — Set, clear, add, or subtract document variables. Ticker values clamp into min and max; clear returns to start. Number variables support set, clear, add, and subtract. When the variable pages a list, add and subtract clamp to 1…pageCount. When a single set-variable button's value equals the current variable, it is pressed (aria-pressed, data-selected, and an underline). The value may be a literal or {{var:item.field}}. Two or more buttons that set the same variable are a radiogroup; the selected one has aria-checked and data-selected (not aria-pressed), and arrow keys move the selection.
  • runRequest — Trigger a named dataRequest (list/get). Behavior lives on the request (filters, resultWrites); the button only supplies requestName.
  • runMutation — Trigger a named dataRequest create/update. Public create uses field grants + built-in honeypot. See design/shared-concepts/data-requests.
  • modal — Toggle a ModalBlock by modalId.
  • locale — Switch or menu website locale.
  • theme — Toggle light/dark theme.
  • requestNextPage — Set the page query key (default page) to the next page and re-run requestName. Bind the list with {{bind:query.page}}.
  • requestPrevPage — Set the page query key (default page) to the previous page, not below 1, and re-run requestName.
  • sliderPrev — Previous slide in a SlotSliderBlock.
  • sliderNext — Next slide in a SlotSliderBlock.
  • sliderGoTo — Jump to sliderIndex on a SlotSliderBlock.
  • consentCookies — Grant cookie consent only.
  • consentPush — Grant push consent only.
  • consentAll — Grant cookie and push consent.

social-network

Social network. Brand / share target when the button action is shareSocial.

Used by fields: socialNetwork

  • whatsapp
  • x
  • facebook
  • linkedin

heading-level

Heading level. Optional semantic HTML heading level (h1–h6). When omitted, Simple text renders as a paragraph.

Used by fields: level

  • h1 — Primary page heading. Prefer one H1 per page topic.
  • h2
  • h3
  • h4
  • h5
  • h6

text-align

Alignment. Horizontal alignment for text or slider navigation controls.

Used by fields: textAlign, navAlign, listSliderNavAlign, overlayTextAlign

  • left
  • center
  • right

underline-mode

Underline mode. How heading underline decoration is drawn relative to the text.

Used by fields: underlineMode

  • inline — inline follows the text.
  • separate — separate is a line under the text.

image-mode

Image fit. How an image fills its frame.

Used by fields: imageMode, backgroundImageMode

  • cover — Fill the frame; crop overflow if needed.
  • contain — Fit the whole image inside the frame; may letterbox.
  • repeat — Tile the image (background images).

orientation

Orientation. Axis for lines and similar decorative controls.

Used by fields: orientation

  • horizontal
  • vertical

controls-placement

Slider controls placement. Where SlotSlider title, counter, and chevrons sit relative to sliding media.

Used by fields: controlsPlacement

  • below — Default: chevrons and dots under the viewport.
  • sidePanel — Fixed side panel holds the active slide’s panel slot plus counter and chevrons; only media slides.

transition

Slider transition. Motion used when a slider advances between slides.

Used by fields: transition, listSliderTransition

  • slide — Default horizontal slide.
  • fade — Cross-fade between slides.
  • slideUp
  • zoom
  • cover
  • flip
  • flipUp
  • cube
  • cubeUp
  • carousel
  • fold

auth-visibility

Auth visibility. Who can see a block based on website sign-in state.

Used by fields: authVisibility

  • all — Everyone.
  • authenticated — Signed-in website users only.
  • anonymous — Signed-out visitors only.

route-lock-visibility

Route lock visibility. On locked object routes, when the block should appear.

Used by fields: routeLockVisibility

  • all — Always.
  • when_unlocked — Only when the route is unlocked.
  • when_locked — Only when the route is locked.

entry-action-visibility

Entry action visibility. Show when the current entry exposes matching actions.

Used by fields: entryActionVisibility

  • all — Always.
  • canUpdate — When the visitor can update the entry.
  • canDelete — When the visitor can delete the entry.

query-page-visibility

Query page visibility. Optional limit for list blocks across query pages.

Used by fields: queryPageVisibility

  • all — All query pages.
  • first_page_only — Only the first query page.

padding-token

Padding token. Theme spacing tokens for block padding. Tokens keep spacing consistent with the site theme.

Used by fields: padding

  • none
  • xs
  • sm
  • md
  • lg
  • xl

border-width

Border width. Theme border-width tokens.

Used by fields: borderWidth, thickness

  • none
  • sm
  • md
  • lg

border-radius

Border radius. Theme border-radius tokens.

Used by fields: borderRadius

  • none
  • sm
  • md
  • lg
  • xl
  • full

border-style

Border style. CSS border style for decorated blocks.

Used by fields: borderStyle

  • solid
  • dashed
  • dotted

background-kind

Background kind. Fill mode for block backgrounds.

Used by fields: backgroundKind

  • solid
  • gradient
  • image
  • video
  • animation

background-grid-style

Background grid style. Reactive grid cell rendering: filled cells or interconnected continuous outlines. Custom SVG shapes always render as cells.

Used by fields: backgroundGridStyle

  • cells
  • continuous

decoration-overflow

Overflow. Frame overflow for BlockShell decorations.

Used by fields: overflow

  • visible
  • hidden
  • auto
  • clip

decoration-pointer-events

Pointer events. Whether the decoration frame receives pointer events.

Used by fields: pointerEvents

  • auto
  • none

decoration-static-unit

Static size unit. CSS length unit for static width/height.

Used by fields: widthStaticUnit, heightStaticUnit

  • px
  • vw
  • vh
  • vmin
  • vmax

background-width

Background width. How far the background spans horizontally.

Used by fields: backgroundWidth

  • page — Stay within the block width.
  • full — Stretch to the viewport width.

scroll-animation

Scroll animation. Enter-on-scroll animation presets for BlockShell decoration.

Used by fields: scrollAnimationType

  • fadeIn
  • slideInBottom
  • slideInTop
  • slideInLeft
  • slideInRight
  • zoomIn
  • zoomOut
  • rotateIn
  • rotateOut
  • bounceIn
  • bounceOut
  • pulse

grid-size

Grid size. Column count for gallery-style layouts.

Used by fields: gridSize

  • 2
  • 3
  • 4