Widget Examples
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 Option One
</e-select-option>
<e-select-option value="option_2">
Widget Option Two
</e-select-option>
<e-select-option value="option_3">
Widget Option Three
</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 goes here.
</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="e-wrench"></e-icon>
Widget Action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="bar-chart"></e-icon>
Widget Action
</button>
</div>
</footer>
</e-widget><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">
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>
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">
Content goes here. Sunt velit nulla adipiscing ut do, enim, ut aliquip veniam 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>
Widget Action
</button>
<button class="e-btn e-btn-borderless e-widget__footer_action">
<e-icon icon="bar-chart"></e-icon>
Widget Action
</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">
Eu proident ullamco deserunt amet excepteur incididunt adipiscing? Esse adipiscing proident id elit esse ad incididunt do quis, quis nulla proident. Reprehenderit adipiscing cupidatat anim nostrud consequat mollit aliqua.
</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>
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-4 e-cell-small">
<e-widget class="e-widget-equal_height">
<header class="e-widget__header">
<h4 class="e-widget__title">
Purchases
</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">
Dolor irure, aute pariatur nostrud occaecat, cillum in? Amet ullamco culpa ex in et consequat non laborum esse ex excepteur ut?
</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>
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-equal_height">
<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>
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">
Est dolor adipiscing, id enim est, tempor aliqua, et.
</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>
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-equal_height">
<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>
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">
Adipiscing, excepteur elit in id aliquip, nostrud. Lorem ipsum, consequat cillum aliquip, excepteur proident. Consequat, esse est proident do enim id, laborum magna sit, proident aliquip id.
</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>
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-12 e-cell-small">
<e-widget class="e-widget-equal_height">
<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>
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">
Qui consequat, est veniam ipsum. Tempor culpa, velit, cillum esse labore dolor. Ut sit dolore, do do, incididunt occaecat culpa enim incididunt sunt nostrud, et consectetur? Incididunt, dolor lorem commodo sit magna consectetur. Aliqua id deserunt aute exercitation labore? Magna consectetur ullamco, nulla veniam laboris dolore veniam nulla exercitation.
</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>
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>.e-widget-warning, .e-widget-error, .e-widget-success, .e-widget-info
<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 goes here.
</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-error e-margin-left-xs">
<e-icon class="e-label__icon" icon="e-error" 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 goes here.
</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-info 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-info e-margin-left-xs">
<e-icon class="e-label__icon" icon="e-info-circle" color="inherit" type="small"></e-icon>
2 Infos
</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 goes here.
</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-success 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-success e-margin-left-xs">
<e-icon class="e-label__icon" icon="e-check-circle" color="inherit" type="small"></e-icon>
2 Successes
</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 goes here.
</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><e-widget>
<header class="e-widget__header">
<h4 class="e-widget__title">
Widget Title
</h4>
<div class="e-widget__header_actions">
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__header_action"></div>
<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">
<div class="e-skeleton e-skeleton-l e-margin-vertical-xs"></div>
<div class="e-skeleton e-margin-vertical-xs"></div>
<div class="e-skeleton e-margin-vertical-xs"></div>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__footer_action"></div>
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__footer_action"></div></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">
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__header_action"></div>
<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">
<e-chart-loader></e-chart-loader>
</section>
<footer class="e-widget__footer">
<div class="e-widget__footer_actions">
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__footer_action"></div>
<div class="e-skeleton e-skeleton-button e-skeleton-l e-widget__footer_action"></div></div>
</footer>
</e-widget>