Components

component

block-component or -block-component: true

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

Is shown as part of a library on the left sidebar
A component can always be removed
A dashed red line is shown where a component can be dropped in
A dashed red outline is shown when mousing over a component along with its options

Example


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

style

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

Multiple versions of a component that can be switched between.

The same variable name should be used for all style blocks that apply to its component
Style blocks should be adjacent to each other
Numbered tabs are shown to switch between the available styles

Example


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

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

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