Components

Functional elements

component

block-component or -block-component: true

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

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.

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>