Developer

Sections

Layout options

Section highlight icon

section

block-section or -block-section: true

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

style

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

Multiple versions of a Section that can be switched between.

Example

<div class="block-section" 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-section" 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-section" data-style="header">
  <h1 class="block" style="text-align: right">Title Right</h1>
  <p class="block" style="text-align: left">Content Right</p>
</div>

Components

Stand-alone functional elements

Component highlight icon

component

block-component or -block-component: true

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

Example

<a href="#" class="block-component" data-style="button" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a>

style

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

Multiple versions of a Component that can be switched between.

Example

<a href="#" class="block-component" data-style="button" style="background-color: red; padding: 5px 10px; color: #fff;">
<a href="#" class="block-component" data-style="button" style="background-color: blue; padding: 5px 10px; color: #fff;">
<a href="#" class="block-component" data-style="button" style="background-color: yellow; padding: 5px 10px; color: #fff;">Call to Action</a>

Implementation Support

Need help implementing your template? Here are some options: