Widget
Widgets are part of the layout they appear in but they also make sense on their own and therefore suggest slight detachability (they always have level 1 elevation). Usually they are used to display charts or datasets that can be filtered and performed actions with - both from inside the widget’s top and bottom control bars.
Examples
Good examples on when to use an e-widget: display charts, datagrids, lists, tables, forms or a single setting with just a few fields or a singular action that can be triggered from inside the widget.
Bad examples on when not to use widgets: to separate, group or segment content within a layout, or to use a widget where it’s content can be interacted with from outside the widget.
Default
<e-widget>
<header class="e-widget__header">
<h4 class="e-widget__title">
Widget title
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Widget action option 1
</e-select-option>
<e-select-option value="option_2">
Widget action option 2
</e-select-option>
<e-select-option value="option_3">
Widget action option 3
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget><e-widget>
<header class="e-widget__header">
<h4 class="e-widget__title">
Widget title
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Widget action option 1
</e-select-option>
<e-select-option value="option_2">
Widget action option 2
</e-select-option>
<e-select-option value="option_3">
Widget action option 3
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget>JavaScript
Widget title
Variation
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Laborum ut sed dolore voluptate, duis.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Labore qui
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Exercitation ut in
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Ipsum deserunt proident, cupidatat in ut reprehenderit ex eu. Dolor ut aliquip nulla, tempor mollit quis, sed ut. Voluptate aliquip duis voluptate eu.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Reprehenderit proident
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
In duis ea
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Aliquip enim aliquip quis cillum eiusmod occaecat dolor elit eu amet dolor? Consectetur cupidatat ipsum dolore aute non commodo aute enim, in?
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Ut ex
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Sunt laborum deserunt
</button>
</div>
</footer>
</e-widget>
</div>
</div>
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Commodo sint exercitation est laborum ad.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Irure labore proident duis
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
In nostrud dolore deserunt cillum
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Et quis in, ex ipsum, magna id commodo labore, ipsum. Laborum voluptate mollit dolore mollit eiusmod fugiat, culpa dolor incididunt, non, ut. Duis ullamco lorem laboris duis, quis, qui anim voluptate nulla occaecat tempor consectetur.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Nisi nisi anim aliquip
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Mollit do dolor commodo sint
</button>
</div>
</footer>
</e-widget>
</div>
</div>
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-12 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Dolore magna enim sunt culpa ipsum ex cupidatat. Adipiscing ea in laborum nulla do sint officia ullamco, id ut, amet, id anim. Lorem consectetur ipsum ut, nulla consequat incididunt. Consequat deserunt dolore laborum officia pariatur ea. Culpa id, dolor, laboris ullamco do, duis. Eu duis consequat ad quis, voluptate nostrud tempor ipsum ea?
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Dolore tempor ipsum ad ea
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Irure consequat fugiat consectetur qui fugiat
</button>
</div>
</footer>
</e-widget>
</div>
</div><div class="e-grid e-grid-small">
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Enim dolore, ad ut aliquip tempor, officia sit nisi, pariatur?
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Amet mollit
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Sint velit dolore
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Velit labore eiusmod minim, reprehenderit. Sint labore, pariatur in nostrud mollit irure. In occaecat laborum aliquip sunt nisi sint?
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Voluptate enim
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Veniam nostrud exercitation
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Consectetur amet adipiscing, dolore duis lorem nostrud. Commodo aliqua anim quis, dolore, cillum.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Dolore ut
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Lorem cupidatat nisi
</button>
</div>
</footer>
</e-widget>
</div>
</div>
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Ut minim culpa est eiusmod.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Enim nulla in exercitation
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Adipiscing sint enim non consectetur
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Voluptate ut ut, consequat commodo eiusmod do, esse, velit? Enim excepteur elit, aliqua laboris, qui. Enim et laborum, enim magna minim dolor nostrud.
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Deserunt in lorem mollit
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Nulla sunt laboris reprehenderit magna
</button>
</div>
</footer>
</e-widget>
</div>
</div>
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-12 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Campaign daily visits
</h4>
<div class="e-widget__header_actions">
<e-select class="e-widget__header_action" inline borderless>
<e-select-option value="option_1" selected>
Last 90 days
</e-select-option>
<e-select-option value="option_2">
Last 60 days
</e-select-option>
<e-select-option value="option_3">
Last 30 days
</e-select-option>
</e-select>
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content">
<div class="e-padding-m">
Ex tempor laborum dolore minim aliqua lorem aliquip pariatur proident nulla id. In sint, ut occaecat dolore quis cillum fugiat anim incididunt commodo ipsum, ullamco commodo. Minim do, proident reprehenderit id, enim ad, proident pariatur nostrud dolore exercitation minim. Nulla ut ex consectetur lorem nostrud, voluptate reprehenderit esse esse. Dolore, sed culpa commodo, reprehenderit magna nostrud, in, do ullamco, culpa commodo. Ad sed sed veniam duis deserunt amet in mollit mollit, eu, ad mollit?
</div>
<div>
<ec-chart axis-x-hidden axis-y-hidden domain-type="time" tooltip-x-date-format="time" axis-x-date-format="time" format-x="date" style="margin: 0 -10px -15px;">
<ec-series-area color="#698CD1" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":106},{"x":"2017-08-14T12:00:00.000Z","y":84},{"x":"2017-08-15T10:40:00.000Z","y":81},{"x":"2017-08-16T10:55:00.000Z","y":41},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":126},{"x":"2017-08-19T11:30:00.000Z","y":146}]"></ec-series-area>
<ec-series-line color="#C5E5F5" name="Data" data="[{"x":"2017-08-13T13:00:00.000Z","y":86},{"x":"2017-08-14T12:00:00.000Z","y":104},{"x":"2017-08-15T10:40:00.000Z","y":91},{"x":"2017-08-16T10:55:00.000Z","y":31},{"x":"2017-08-17T15:00:40.000Z","y":86},{"x":"2017-08-18T11:30:00.000Z","y":146},{"x":"2017-08-19T11:30:00.000Z","y":126}]"></ec-series-line>
</ec-chart>
</div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Aliqua velit dolor proident ut
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Incididunt lorem sunt duis dolore fugiat
</button>
</div>
</footer>
</e-widget>
</div>
</div>JavaScript
Campaign daily visits
Campaign daily visits
Campaign daily visits
Campaign daily visits
Campaign daily visits
Campaign daily visits
Variation
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-warning e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title e-widget__title-with_badge">
Widget title
<div class="e-label e-label-warning e-margin-left-xs">
<e-icon class="e-label__icon" icon="warning" color="inherit" type="small"></e-icon>
2 warnings
</div>
</h4>
<div class="e-widget__header_actions">
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-error e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title e-widget__title-with_badge">
Widget title
<div class="e-label e-label-danger e-margin-left-xs">
<e-icon class="e-label__icon" icon="warning" color="inherit" type="small"></e-icon>
2 errors
</div>
</h4>
<div class="e-widget__header_actions">
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget>
</div>
</div><div class="e-grid e-grid-small">
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-warning e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title e-widget__title-with_badge">
Widget title
<div class="e-label e-label-warning e-margin-left-xs">
<e-icon class="e-label__icon" icon="warning" color="inherit" type="small"></e-icon>
2 warnings
</div>
</h4>
<div class="e-widget__header_actions">
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget>
</div>
<div class="e-cell e-cell-6 e-cell-small">
<e-widget class="e-widget-error e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title e-widget__title-with_badge">
Widget title
<div class="e-label e-label-danger e-margin-left-xs">
<e-icon class="e-label__icon" icon="warning" color="inherit" type="small"></e-icon>
2 errors
</div>
</h4>
<div class="e-widget__header_actions">
<button class="e-btn e-btn-borderless e-btn-onlyicon e-widget__header_action">
<e-icon icon="close"></e-icon>
</button>
</div>
</header>
<section class="e-widget__content e-padding-m">
Widget content
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="cog"></e-icon>
Widget action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="custom"></e-icon>
Widget action
</button>
</div>
</footer>
</e-widget>
</div>
</div>JavaScript