Components

Stand-alone pieces that can be added throughout an email or page. The code for a component needs to be self-contained with its own container in order to be placed among any element.

Components are part of a library on the left sidebar. Once placed, a component can always be moved, or removed. A dashed blue line is shown where a component can be dropped in.

block-component

In order for the user to place a component within a section, the section needs either a region drop area, or at least one content anchor point. The content can be either a paragraph of text, or an editable text or image element that is not itself a component.

Adding variable names to components saves their metadata. Each unique component requires its own variable name.

data-group="variable-name"

To add a title for the component in the sidebar, use the data-title attribute.

data-title="Title"

Example

<a href="#" class="block-component block-edit" data-group="cta" data-block="cta-text" data-title="CTA">Call to Action</a>

Variants

Variants are alternate versions of components 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 blocks that apply to its component. Blocks should be immediately adjacent to each other.

Example

<a href="#" class="btn block-component block-edit" data-group="cta" data-block="cta-text" data-title="CTA">Call to Action</a>
<a href="#" class="btn-alt block-component block-edit" data-group="cta" data-block="cta-text">Call to Action</a>