Device Display Examples
<e-device-doc></e-device-doc><e-device>
<div class="e-device-push is-ios_phone_default is-lockscreen">
<div class="e-device-push__notification is-ios_phone_default is-lockscreen">
<div class="e-device-push__header is-ios_phone_default is-lockscreen">
<img class="e-device-push__icon is-ios_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-lockscreen">
<div class="e-device-push__headline is-ios_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default is-lockscreen">
Press for more
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default is-alert">
<div class="e-device-push__notification is-ios_phone_default is-alert">
<div class="e-device-push__header is-ios_phone_default is-alert">
<img class="e-device-push__icon is-ios_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-alert">
<div class="e-device-push__headline is-ios_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default has-media is-expanded">
<div class="e-device-push__notification is-ios_phone_default has-media is-expanded">
<div class="e-device-push__header is-ios_phone_default has-media is-expanded">
<img class="e-device-push__icon is-ios_phone_default has-media is-expanded" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default has-media is-expanded">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default has-media is-expanded">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default has-media is-expanded" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default has-media is-expanded">
<div class="e-device-push__headline is-ios_phone_default has-media is-expanded">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default has-media is-expanded">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default has-media is-expanded">
Press for more
</div>
<div class="e-device-push__buttons is-ios_phone_default">
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Reply
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Search
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Add
</div>
</div>
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default is-inbox">
<div class="e-device-push__notification is-ios_phone_default is-inbox">
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-inbox has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-inbox">
<div class="e-device-push__headline is-ios_phone_default is-inbox e-device-push__editable">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-inbox e-device-push__editable">
Ut pariatur eu id cupidatat ea aute incididunt consequat commodo esse mollit incididunt labore quis tempor ut ut nulla magna in minim veniam veniam cupidatat qui ex magna dolore veniam
</div>
</div>
</div>
</div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-lockscreen">
<div class="e-device-push__notification is-android_phone_default is-lockscreen">
<div class="e-device-push__header is-android_phone_default is-lockscreen">
<img class="e-device-push__icon is-android_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-lockscreen">
<div class="e-device-push__headline is-android_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-android_phone_default is-lockscreen">
Press for more
</div>
<div class="e-device-push__buttons is-android_phone_default">
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Reply
</div>
</div>
</div>
</div>
</div>
</div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-alert">
<div class="e-device-push__notification is-android_phone_default is-alert">
<div class="e-device-push__header is-android_phone_default is-alert">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-alert">
<div class="e-device-push__headline is-android_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-expanded has-media">
<div class="e-device-push__notification is-android_phone_default is-expanded has-media">
<div class="e-device-push__header is-android_phone_default is-expanded has-media">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-expanded has-media" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-expanded has-media">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-expanded has-media">
now
</div>
</div>
<div class="e-device-push__container is-android_phone_default is-expanded has-media">
<div class="e-device-push__headline">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-expanded has-media">
Content
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-expanded has-media" style="background-image: url("https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg");"></div></div></div>
</e-device><e-device>
<div class="e-device-sms">
<input class="e-device-sms__fromname e-device-sms__fromname-editable" placeholder="Enter from name" type="text">
<div class="e-device-sms__content">
<div class="e-device-sms__message">
Lorem Ipsum
</div>
<div class="e-device-sms__counter">
0/160 GSM
</div>
</div>
</div>
</e-device>