HOC Site
← Ortak kavramlar

Alan seçenekleri

Tasarım bloklarında paylaşılan enum ve seçim değerleri: sunum (presentation), görünüm, eylem, görünürlük ve daha fazlası.

Presentation

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

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: socialNetwork

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

Heading level

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

Kullanan alanlar: 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.

Kullanan alanlar: textAlignnavAlignlistSliderNavAlignoverlayTextAlign

  • left
  • center
  • right
textAlign: "left"

Underline mode

How heading underline decoration is drawn relative to the text.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: orientation

  • horizontal
  • vertical
orientation: "horizontal"

Slider transition

Motion used when a slider advances between slides.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: 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.

Kullanan alanlar: padding

  • none
  • xs
  • sm
  • md
  • lg
  • xl
padding: "none"

Border width

Theme border-width tokens.

Kullanan alanlar: borderWidththickness

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

Border radius

Theme border-radius tokens.

Kullanan alanlar: borderRadius

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

Border style

CSS border style for decorated blocks.

Kullanan alanlar: borderStyle

  • solid
  • dashed
  • dotted
borderStyle: "solid"

Background kind

Fill mode for block backgrounds.

Kullanan alanlar: 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.

Kullanan alanlar: backgroundGridStyle

  • cells
  • continuous
backgroundGridStyle: "cells"

Overflow

Frame overflow for BlockShell decorations.

Kullanan alanlar: overflow

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

Pointer events

Whether the decoration frame receives pointer events.

Kullanan alanlar: pointerEvents

  • auto
  • none
pointerEvents: "auto"

Static size unit

CSS length unit for static width/height.

Kullanan alanlar: widthStaticUnitheightStaticUnit

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

Background width

How far the background spans horizontally.

Kullanan alanlar: backgroundWidth

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

Scroll animation

Enter-on-scroll animation presets for BlockShell decoration.

Kullanan alanlar: scrollAnimationType

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

Grid size

Column count for gallery-style layouts.

Kullanan alanlar: gridSize

  • 2
  • 3
  • 4
gridSize: "2"