Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Device Display

Default

Copy Pug
Copy HTML
Show code
Hide code

<e-device-doc></e-device-doc>

<e-device-doc></e-device-doc>

Push with tokeninputs
Copy Pug
Copy HTML
Show code
Hide code

<e-device>
  <e-device-push app-title="Mail" editable>
    <e-token-input class="e-device-push__headline" placeholder="From Name" no-style value="From Name &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt;"></e-token-input>
    <e-token-input class="e-device-push__headline" placeholder="Title" no-style value="Title Goes &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Here"></e-token-input>
    <e-token-input class="e-device-push__content is-ios_phone_default is-lockscreen" placeholder="Message" rows="2" no-style value="Pre-header &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
  </e-device-push>
</e-device>

<e-device><e-device-push app-title="Mail" editable><e-token-input class="e-device-push__headline" placeholder="From Name" no-style="" value="From Name &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt;"></e-token-input><e-token-input class="e-device-push__headline" placeholder="Title" no-style="" value="Title Goes &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Here"></e-token-input><e-token-input class="e-device-push__content is-ios_phone_default is-lockscreen" placeholder="Message" rows="2" no-style="" value="Pre-header &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input></e-device-push></e-device>

Message list with tokeninput
Copy Pug
Copy HTML
Show code
Hide code

<e-device>
  <e-device-content type="messagelist" editable>
    <e-token-input class="e-device-content__fromname" placeholder="From" no-style value="From Name &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt;"></e-token-input>
    <e-token-input class="e-device-content__subject" placeholder="Title" no-style value="Title Goes &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Here"></e-token-input>
    <e-token-input class="e-device-content__preheader" placeholder="Message" no-style rows="2" value="Pre-header &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
  </e-device-content>
</e-device>

<e-device><e-device-content type="messagelist" editable><e-token-input class="e-device-content__fromname" placeholder="From" no-style="" value="From Name &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt;"></e-token-input><e-token-input class="e-device-content__subject" placeholder="Title" no-style="" value="Title Goes &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Here"></e-token-input><e-token-input class="e-device-content__preheader" placeholder="Message" no-style="" rows="2" value="Pre-header &lt;span name=&quot;token&quot; type=&quot;tokentype&quot; data='{ &quot;z&quot;: &quot;1&quot; }'&gt;&lt;/span&gt; Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input></e-device-content></e-device>

e-device API Reference

Properties

NameDescriptionTypeRequiredDefault value
widthSets the width of the device (keeps aspect ratio)number
heightSets the height of the device (keeps aspect ratio)number
typeSets the type of the device (iphone and computer for now)string

e-device-content API Reference

Properties

NameDescriptionTypeRequiredDefault value
typeSets the type of the content (message list of lockscreen for now)string
from-nameSets from name field, single linestring
subjectSets subject fieldstring
preheaderSets preheader fieldstring

e-device-push API Reference

Properties

NameDescriptionTypeRequiredDefault value
typeSets the type of the push: lockscreen, alert, nocstringlockscreen
deviceSets the device of the push: ios-phone-default, android-phone-defaultstringios-phone-default
iconSets push icon imageurl as string
app-titleSets push app namestring
headlineSets push headlinestring
subtitleSets push subtitlestring
contentSets push contentstring
expandedSets expanded state for pushbooleanfalse