Developer

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>