${ class |type :args }
- usage ${class|ul:class="menu" role="nav"}

This tag allows you to add dynamic elements to your output. You can add any raw element, eg. H1 – along with properties. These elements will ONLY use the properties you assign in the Arguments.

IMPORTANT: Elements added with this tag DO NOT store position, size or layer styles.  These are RAW elements, you must link external files for scripts and styles.

Using Class Tags

We strongly recommend you add your Class Tag as the PARENT folder of your elements, this will maintain your element properties.

EXAMPLE: Assuming you want to add an Anchor to our button folder, you should group your button folder and add your class tag to the parent group.

NOTE: If you think Class Tag should store properties related to the PSD layer, contact us and let us know.

There is no limit to the number of classes/elements you can add, but you must add these on folders.

Class Types

Export Kit will support any native class/element type for Web and Android (note: WordPress uses HTML elements).

HTML Class Types Exmaples

${class|div: } = <div />
${class|ul: } = <ul />
${class|section: } = <section />
${class|header: } = <header />
${class|footer: } = <footer />

It is IMPORTANT to note the colon/space ": " in the tag. This tag requires args to render correctly, so you must add an argument to the tag - in this case an empty space.

You can create any valid HTML element in your output and control the element externally.

IMPORTANT: Elements added with this tag DO NOT store position, size or layer styles, link external files to control these.

Class Args

Arguments are passed as direct attributes to the element. This allows you to add any type of dynamic content to your custom class elements.

HTML Class Args Exmaples

${class|div:onclick="alert(window.location)"}
= <div onclick="alert(window.location)" />

${class|ul:class="menu" role="nav"}
= <ul class="menu" role="nav" />

You must include your required position and styles inside the Class Args, or link to external files.

${class|p:style="margin-top:10px;text-align:center;"}
= <p style="margin-top:10px;text-align:center;" />

${class|p:class="my-external css_class"}
= <p class="my-external css_class" />

Working With Android

Class Tag works very differently with Android Output and is designed to create native Android Widgets – learn more.

We plan to support custom Java Classes in the future, this will allow you to add your custom Framework elements to your design.