These widgets are not to be confused with dashboard widgets, which are not only more complex, but also built on a completely different basis.
Highlighted widget
To highlight special information more clearly within the widget column, we use an alert. The widget should always be placed first and never in combination with any other alert to give it more focus.
Actually I am an alert ;)
Unlike all other widgets, this one is not based on the
.wui-bs-panelbut on a.wui-bs-alert.
You can find more information about alerts at components/alert/
<div class="wui-bs-alert wui-bs-alert--highlight">
<ul class="wui-fa-list m-b-0">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="fas fa-traffic-cone"></i>
</span>
<p><strong>Actually I am an alert ;)</strong></p>
<p class="m-b-0">Unlike all other widgets, this one is not based on the <code class="sg-code--neutral">.wui-bs-panel</code>
but on a <code class="sg-code--neutral">.wui-bs-alert</code>.<br>
You can find more information about alerts at <a href="/release/components/alert/" class="alert-link">components/alert/</a>
</p>
</li>
</ul>
</div>
Simple text widget
The widget in this example is based on the .wui-bs-panel and contains a simple heading, text, and an unordered list. At the same time, it can also be the starting point for many other, more complex widgets.
Simple text widget
Headline in widget
Prow scuttle parrel ho shrouds spirits boom. Pinnace holystone quarter crow's nest nipperkin hempen halter
- Deadlights jack lad schooner scallywag
- Shiver me timbers to go on account lookout
<div class="wui-bs-panel m-b-0">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">Simple text widget</h2>
</div>
<div class="panel-body">
<p><strong>Headline in widget</strong></p>
<p>Prow scuttle parrel ho shrouds spirits boom. Pinnace
holystone quarter crow's nest nipperkin hempen halter</p>
<ul class="wui-list--left-aligned m-b-0">
<li>Deadlights jack lad schooner scallywag</li>
<li>Shiver me timbers to go on account lookout</li>
</ul>
</div>
</div>
Validation widget (flashy)
The validation widget always informs the user about the status of the current task. With the flashy version of this widget, we want to motivate to take action, mitigate frustration and errors, and attract attention - which are similar reasons why we use Empty State Images.
Validation widget (flashy)
Congratulations
- Everything runs as expected. You are doing really well.
<div class="wui-bs-panel m-b-0">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">
Validation widget (flashy)
</h2>
</div>
<div class="panel-body">
<div class="display--flex w-full">
<div class="align-self-center text--center w-1/3">
<div class="wui-image">
<img src="https://cdn.wescale.com/wescale/wui/images/cta-feedback/aim-hit.svg"
style="max-width: 120px;">
</div>
</div>
<div class="align-self-center p-l-10 w-2/3">
<p>
<strong>
Congratulations
</strong>
</p>
<ul class="wui-fa-list wui-fa-list--left-aligned">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="fas fa-check wui-color--success"></i>
</span>
Everything runs as expected. You are doing really well.
</li>
</ul>
</div>
</div>
</div>
</div>
Validation widget (focused)
The validation widget always informs the user about the status of the current task. With this widget´s focused version, we want to provide as much information as possible in a clear and structured way. This widget, with its rather high information content, is mainly used in the management area.
Validation widget (focused)
During validation, the loading indicator is displayed in the panel-header. Depending on the status, one of the following icons is displayed in that place.
far fa-checkfor success ()fas fa-exclamation-trianglefor failure ()
<div class="wui-bs-panel m-b-0">
<div class="panel-heading">
<i class="fad fa-spinner-third fa-spin display--block pull-right line-height--controls"></i>
<h2 class="panel-title text--overflow-ellipsis p-r-15">
Validation widget (focused)
</h2>
</div>
<div class="panel-body">
<p>During validation, the loading indicator is displayed in the panel-header. Depending on the
status, one of the following icons is displayed in that place.</p>
<ul class="wui-list--left-aligned">
<li><code>far fa-check</code> for success (<i
class="far fa-check wui-color--success"></i>)</li>
<li>
<code>fas fa-exclamation-triangle</code> for failure (<i
class="fas fa-exclamation-triangle wui-color--danger"></i>)
</li>
</ul>
</div>
</div>
1/3 - 2/3 widget
In the nature of widgets, they display very different contents and thus also look very different. However, to keep a nice and neat overview, we limit it to two basic layouts. In addition to single-column widgets, there are - as in this example - widgets with a 1/3 - 2/3 split. This widget in turn can serve as a starting point for other, more complex widgets.
Your contact (3)
John Doe
- mail-me@wescale.com
- +49-(0)1234 567 8910
- Mon-Fri, 9:00 AM-6:00 PM
<div class="wui-bs-panel m-b-0">
<div class="panel-heading">
<ul role="navigation" aria-label="quick table pagination"
class="panel-heading__pagination wui-pagination pull-right">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a aria-label="Previous">
<i aria-hidden="true" class="fa fa-chevron-left"></i>
</a>
</li>
<li class="wui-pagination__item">
<a aria-label="Next">
<i aria-hidden="true" class="fa fa-chevron-right"></i>
</a>
</li>
</ul>
<h2 class="panel-title text--overflow-ellipsis">
Your contact (3)
</h2>
</div>
<div class="panel-body">
<div class="display--flex w-full">
<div class="align-self-center text--center w-1/3">
<div class="wui-appicon2 wui-appicon2--lg">
<div class="wui-image wui-image--content-fit">
<img src="/release/assets/images/avatar.png">
</div>
</div>
<p class="m-t-5 m-b-0"><strong>John Doe</strong></p>
</div>
<div class="align-self-center p-l-10 w-2/3">
<ul class="wui-fa-list wui-fa-list--left-aligned m-b-0">
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-envelope"></i>
</span>
<a href="mailto:#">mail-me@wescale.com</a>
</li>
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-phone"></i>
</span>
<a href="tel:1234 567 8910">+49-(0)1234 567 8910</a>
</li>
<li>
<span class="wui-fa-list__fa-bullet">
<i class="far fa-clock"></i>
</span>
Mon-Fri, 9:00 AM-6:00 PM
</li>
</ul>
</div>
</div>
</div>
</div>
Scrollable widget
This widget is rather complex. Nevertheless, it can be built using existing elements as well as utility classes. Moreover, this widget has some features that can be used with other widgets as well. In this case, the widget has a .panel-footer and is scrollable. Since the scrollable container´s height depends heavily on the use case, it is set individually in the APP.css. If possible, the height should be set so that one of the items appears in the bleed. Among other things, this gives the user an additional clue that scrolling is possible at this point. If - as in this example - there are more items than can be seen at first glance, there is usually an additional indicator about the total number of items in the headline (this also applies to pageable widgets).
Scrollable widget (4)
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title text--overflow-ellipsis">Scrollable widget (4)</h2>
</div>
<div class="panel-body p-b-0 h-max-280" style="max-height:280px; overflow:auto;">
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--grapes">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--grapes wui-label">
wui-label
</span>
<br>
<strong>
--grapes
</strong>
<span> color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.00 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--peach">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Quotation expired" class="m-b-5 wui-bg-color--peach wui-label">
wui-label
</span>
<br>
<strong>
--peach
</strong>
<span>
color for label and alert to indicate state
</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.50 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--blueberry">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--blueberry wui-label">
wui-label
</span>
<br>
<strong>
--blueberry
</strong>
<span>color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
1.20 USD
</div>
</div>
</div>
</a>
<a href="#" class="">
<div class="p-10 m-b-10 wui-bs-alert wui-bs-alert--yangmei">
<div class="display--table w-full">
<div class="display--table-cell w-3/4">
<span title="Draft" class="m-b-5 wui-bg-color--yangmei wui-label">
wui-label
</span>
<br>
<strong>
--yangmei
</strong>
<span>color for label and alert to indicate state</span>
</div>
<div class="display--table-cell w-1/4 text--right v-align--bottom text--no-wrap p-l-10">
3.50 USD
</div>
</div>
</div>
</a>
</div>
<div class="panel-footer text--right">
<a href="#" class="">Show in overview</a>
</div>
</div>
Alignment in widget
Another example of a widget based on utility classes and other wui elements can be seen here. If the text is preceded by an element, such as icons or a label, it should always have the same width. This way we can make sure that the text of the different rows is not misaligned. To avoid drawing the user's focus too much to the buttons or the widget itself, we use very subtle buttons with the modifiers .wui-btn--default, .wui-btn--outline and .wui-btn--sm.
Alignment in widget
<div class="wui-bs-panel">
<div class="panel-heading">
<ul role="navigation" aria-label="quick table pagination"
class="panel-heading__pagination wui-pagination pull-right">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a aria-label="Previous">
<i aria-hidden="true" class="fa fa-chevron-left"></i>
</a>
</li>
<li class="wui-pagination__item">
<a aria-label="Next">
<i aria-hidden="true" class="fa fa-chevron-right"></i>
</a>
</li>
</ul>
<h2 class="panel-title text--overflow-ellipsis">Alignment in widget</h2>
</div>
<div class="panel-body">
<div class="m-b-10" style="display:flex; align-items: center;">
<div>
<span class="wui-label wui-label--percentage">
84%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here that gets truncated by overflow ellipsis if it is to long for one row.
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
<div class="m-b-10" style="display:flex; align-items: center;">
<div>
<span class="wui-label wui-label--percentage wui-bg-color--gray-60">
11%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
<div class="" style="display:flex; align-items: center;">
<div>
<span class="wui-label wui-label--percentage wui-bg-color--gray-60">
20%
</span>
</div>
<div class="text--overflow-ellipsis w-full p-x-10">
Some text here
</div>
<div>
<button class="wui-btn wui-btn--default wui-btn--outline wui-btn--sm">Use</button>
</div>
</div>
</div>
</div>
Extended choices widget
This widget allows the user to choose from several variations. For example, the following widget shows different variations of the same product. In this use case all elements of the widget are needed, but in other cases you might use less elements. Since this is a very complex widget, it cannot be 100% rendered using utils. For the heights, for example, we use inline styling. For cross-platform consistency, please discuss these inline styles with the WUI team in advance.
A full working example can also be found in our storybook.
- Term
- Definition
- Term
- Definition
- Term
- Definition
Price
Additional price information- Term
- Definition
- Term
- Definition
- Term
- Definition
Price
Additional price information- Term
- Definition
- Term
- Definition
- Term
- Definition
Price
Additional price informationOptimizations w/ and w/o images
In this widget equal products ( equal not the same) are suggested, which can be delivered faster and/or cheaper. When a user clicks on one of these products, the product's detail page opens in the same browser tab. The favorites heart is a separate click area on its own. Since this is a very complex widget, it cannot be 100% exposed using utils. For the heights, for example, we use inline styling. For cross-platform consistency, please discuss these inline styles with the WUI team in advance.
A full working example can also be found in our storybook.
Headline
- This item would be cheaper
- Same delivery date
Price
Additional price information
Headline
- Item is more expensive
- Item has a faster delivery time
Price
Additional price information
Headline
- This item would be cheaper
- Item has a faster delivery time
Price
Additional price informationUnder certain conditions, it may happen that the proposed products all have the very same image. In this exceptional case, we omit the images. However, the general HTML structure remains the same.
A full working example can also be found in our storybook.
Headline
- This item would be cheaper
- Same delivery date
Price
Additional price informationHeadline
- Item is more expensive
- Item has a faster delivery time
Price
Additional price informationHeadline
- This item would be cheaper
- Item has a faster delivery time
Price
Additional price informationThere is no wui-mono component documentation available yet. But you are always welcome to contact the wui-team
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com
