HOC Site
← Shared concepts

Field options

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

Presentation

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

Used by fields: presentationlistLayoutdisplayMode

  • galleryStatic multi-item grid (or gallery) layout.
  • sliderCarousel / slider that advances through items.
  • gridObject list layout: items arranged in a CSS grid.
presentation: "gallery"

Appearance

Visual style for button-like controls.

Used by fields: appearance

  • filledSolid fill with contrasting text.
  • textText-only / ghost style without a filled background.
appearance: "filled"

Button action

What happens when a visitor activates a button or button link.

Used by fields: action

  • navigateFollow the configured URL / route.
  • copyEntryLinkCopy the current object entry link to the clipboard.
  • shareSocialOpen a share flow for the selected social network.
  • websiteUserSignOutSign the website user out of the site session.
  • notificationsOpen or focus the notifications UI for signed-in users.
  • flowNextAdvance to the next step in a Flow block.
action: "navigate"

Social network

Brand / share target when the button action is shareSocial.

Used by fields: socialNetwork

  • whatsapp
  • x
  • facebook
  • linkedin
socialNetwork: "whatsapp"

Heading level

Semantic HTML heading level used for hierarchy, accessibility, and SEO.

Used by fields: level

  • h1Primary page heading. Prefer one H1 per page topic.
  • h2
  • h3
  • h4
  • h5
  • h6
level: "h1"

Alignment

Horizontal alignment for text or slider navigation controls.

Used by fields: textAlignnavAlignlistSliderNavAlignoverlayTextAlign

  • left
  • center
  • right
textAlign: "left"

Underline mode

How heading underline decoration is drawn relative to the text.

Used by fields: underlineMode

  • inlineDecoration follows the text inline.
  • separateDecoration is drawn as a separate line under the text.
underlineMode: "inline"

Image fit

How an image fills its frame.

Used by fields: imageModebackgroundImageMode

  • coverFill the frame; crop overflow if needed.
  • containFit the whole image inside the frame; may letterbox.
  • repeatTile the image (background images).
imageMode: "cover"

Orientation

Axis for lines and similar decorative controls.

Used by fields: orientation

  • horizontal
  • vertical
orientation: "horizontal"

Slider transition

Motion used when a slider advances between slides.

Used by fields: transitionlistSliderTransition

  • slideDefault horizontal slide.
  • fadeCross-fade between slides.
  • slideUp
  • zoom
  • cover
  • flip
  • flipUp
  • cube
  • cubeUp
  • carousel
  • fold
transition: "slide"

Auth visibility

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

Used by fields: authVisibility

  • allEveryone.
  • authenticatedSigned-in website users only.
  • anonymousSigned-out visitors only.
authVisibility: "all"

Route lock visibility

On locked object routes, when the block should appear.

Used by fields: routeLockVisibility

  • allAlways.
  • when_unlockedOnly when the route is unlocked.
  • when_lockedOnly when the route is locked.
routeLockVisibility: "all"

Entry action visibility

Object-component only: show when the current entry exposes matching actions.

Used by fields: entryActionVisibility

  • allAlways.
  • canUpdateWhen the visitor can update the entry.
  • canDeleteWhen the visitor can delete the entry.
entryActionVisibility: "all"

Query page visibility

Optional limit for list blocks across query pages.

Used by fields: queryPageVisibility

  • allAll query pages.
  • first_page_onlyOnly the first query page.
queryPageVisibility: "all"

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
padding: "none"

Border width

Theme border-width tokens.

Used by fields: borderWidththickness

  • none
  • sm
  • md
  • lg
borderWidth: "none"

Border radius

Theme border-radius tokens.

Used by fields: borderRadius

  • none
  • sm
  • md
  • lg
  • xl
  • full
borderRadius: "none"

Border style

CSS border style for decorated blocks.

Used by fields: borderStyle

  • solid
  • dashed
  • dotted
borderStyle: "solid"

Background kind

Fill mode for block backgrounds.

Used by fields: backgroundKind

  • solid
  • gradient
  • image
  • video
  • animation
backgroundKind: "solid"

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
backgroundGridStyle: "cells"

Overflow

Frame overflow for BlockShell decorations.

Used by fields: overflow

  • visible
  • hidden
  • auto
  • clip
overflow: "visible"

Pointer events

Whether the decoration frame receives pointer events.

Used by fields: pointerEvents

  • auto
  • none
pointerEvents: "auto"

Static size unit

CSS length unit for static width/height.

Used by fields: widthStaticUnitheightStaticUnit

  • px
  • vw
  • vh
  • vmin
  • vmax
widthStaticUnit: "px"

Background width

How far the background spans horizontally.

Used by fields: backgroundWidth

  • pageStay within the page column.
  • fullBleed to the full viewport width.
backgroundWidth: "page"

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
scrollAnimationType: "fadeIn"

Grid size

Column count for gallery-style layouts.

Used by fields: gridSize

  • 2
  • 3
  • 4
gridSize: "2"