Link copied!

Order Examples

<link rel="stylesheet" href="https://client-version.cf.emarsys.net/ui/latest/css/services/ui-framework/order.css">

<script src="https://client-version.cf.emarsys.net/ui-framework-order/latest/app.js"></script>

<section class="e-layout__section e-layout__section-transparent">
  <e-order columns="2" editing>
    <e-order-item id="1asd" order="1" size="1">
      <e-widget class="e-widget-equal_height">
        <header class="e-widget__header">
          <h4 class="e-widget__title">
            First Widget Title
          </h4>
        </header>
        <section class="e-widget__content">
          <div class="e-padding-m">
            Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
          </div>
        </section>
        <footer class="e-widget__footer">
          <div class="e-widget__footer_actions">
            <button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
              <e-icon icon="bar-chart"></e-icon>
              Button Label
            </button>
          </div>
        </footer>
      </e-widget>
    </e-order-item>
    <e-order-item id="2asd" order="2" size="1">
      <e-widget class="e-widget-equal_height">
        <header class="e-widget__header">
          <h4 class="e-widget__title">
            Second Widget Title
          </h4>
        </header>
        <section class="e-widget__content">
          <div class="e-padding-m">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </section>
        <footer class="e-widget__footer">
          <div class="e-widget__footer_actions">
            <button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
              <e-icon icon="bar-chart"></e-icon>
              Button Label
            </button>
          </div>
        </footer>
      </e-widget>
    </e-order-item>
    <e-order-item id="3asd" order="3" size="2">
      <e-widget class="e-widget-equal_height">
        <header class="e-widget__header">
          <h4 class="e-widget__title">
            Third Widget Title
          </h4>
        </header>
        <section class="e-widget__content">
          <div class="e-padding-m">
            Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in.
          </div>
        </section>
        <footer class="e-widget__footer">
          <div class="e-widget__footer_actions">
            <button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
              <e-icon icon="bar-chart"></e-icon>
              Button Label
            </button>
          </div>
        </footer>
      </e-widget>
    </e-order-item>
  </e-order>
</section>
<link rel="stylesheet" href="https://client-version.cf.emarsys.net/ui/latest/css/services/ui-framework/order.css">

<script src="https://client-version.cf.emarsys.net/ui-framework-order/latest/app.js"></script>

<section class="e-layout__section e-layout__section-transparent">
  <e-order columns="2">
    <e-order-item id="1asd" order="1" size="1">
      <e-widget class="e-widget-equal_height">
        <header class="e-widget__header">
          <h4 class="e-widget__title">
            First Widget Title
          </h4>
        </header>
        <section class="e-widget__content">
          <div class="e-padding-m">
            Nisi fugiat id lorem ipsum duis non commodo proident cupidatat reprehenderit in.
          </div>
        </section>
        <footer class="e-widget__footer">
          <div class="e-widget__footer_actions">
            <button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
              <e-icon icon="bar-chart"></e-icon>
              Button Label
            </button>
          </div>
        </footer>
      </e-widget>
    </e-order-item>
    <e-order-item id="2asd" order="2" size="1">
      <e-widget class="e-widget-equal_height">
        <header class="e-widget__header">
          <h4 class="e-widget__title">
            Second Widget Title
          </h4>
        </header>
        <section class="e-widget__content">
          <div class="e-padding-m">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </section>
        <footer class="e-widget__footer">
          <div class="e-widget__footer_actions">
            <button class="e-btn e-btn-borderless e-widget__footer_action" onclick="alert('Lorem ipsum')">
              <e-icon icon="bar-chart"></e-icon>
              Button Label
            </button>
          </div>
        </footer>
      </e-widget>
    </e-order-item>
  </e-order>
</section>