Classes

Add classes to your elements

Additional classes field let you add additional class names to an element.

A class or style declaration contains one or more styles or properties. When an element refers to a class by name it’s styles are applied.

Add the class name in the classes field.

To set the class name to myButtonStyle set the classes field to “myButtonStyle”. Add multiple classes by separating each name with a space.

Sub classes are applied to the child element. If there are no child elements the class name is ignored.

You can define your style declarations in the page template or CSS template or inline via markup inside or in the markup before or after fields

1. Define classes in a stylesheet. Open the Export Artboards dialog and click the stylesheet icon

Or define classes in a style block of an element

1. Add an element to the artboard

2. Open the element options dialog or panel and add a style tag with your classes defined in the markup inside, markup before or markup after fields. Add none to the tag name. That excludes it from export.

3. Reference any classes by adding their name to the classes fields

Example Project

xd-examples/web-export/examples/classes at master · velara3/xd-examplesGitHub

class - HTML: HyperText Markup Language | MDN