Device Display Examples

<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(&quot;https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg&quot;);"></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>