Sections

block-section or -block-section: true

Containers of content stacked on top of each other that can be added in as part of a template's layout.

• Sections can be added in multiple times, reordered, and removed as needed
• Sections are stored and shown in a grid of thumbnails to choose from
• A dashed blue line is shown where a section can be dropped in
• A solid blue outline is shown when mousing over a section along with its options

Example

Regions

block-region or -block-region: true

Customizable areas of elements that can't be moved around.

• Regions cannot contain nested regions
• A dashed green outline is shown when mousing over a region along with its options

Example

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.

block-repeat-# or -block-repeat: #
Sets a limit to the number of items that can be duplicated.

Remove

block-remove or -block-remove: true

Allows a region to be removed.

Components

block-component or -block-component: true

Stand-alone pieces that can be added throughout a template.

• Is shown as part of a library on the left sidebar
• Once placed, a component can always be moved, or removed
• A component cannot contain a region
• A dashed blue line is shown where a component can be dropped in
• A blue outline is shown when mousing over a component along with its options

Example

Variants

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

Variants, or groups are alternate versions of sections, components, and regions that you can enable to choose from. This allows for preset design features and formatting options that can be switched between.

• The same variable name should be used for all group blocks that apply to its section/region/component
• Group blocks should be immediately adjacent to each other
• Groups cannot be nested within each other; either use for a section, or regions within a section, but not both
• Numbered tabs are shown to switch between the available group versions

Example

Stored content

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

Adding to HTML elements stores their content. This works with group functionality to update content across each version.

• Each unique content piece requires its own variable name
• Using the same variable name on multiple content pieces will update content for all pieces when one is updated

Example