Regions

Highlighted editable areas

region

block-region or -block-region: true

Group of elements and components that can be customized.

repeat

block-repeat or -block-repeat: true

Allows duplicating a region, making it part of a listing where each copy can be reordered or removed. Requires 'block-region' class or style.

style

data-style="variable-name" or -style-var: 'variable-name'

Multiple versions of a region that can be switched between.

Example

<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: left">Title Left</h1>
  <p class="block" style="text-align: left">Content Left</p>
</div>
<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: center">Title Center</h1>
  <p class="block" style="text-align: left">Content Center</p>
</div>
<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: right">Title Right</h1>
  <p class="block" style="text-align: left">Content Right</p>
</div>

remove

block-remove or -block-remove: true

Allows a region to be removed.