5
| New Styleguide page for "Loading" | |
| Introduce CDN links to all images | |
| Add Section with index-tiles to branding page | |
| New Styleguide page for "Branding" | |
FC | Extend ".wui-bs-alert" with all fruit-color-variantes |
| Font-Awesome has been updated to version 5.12.0 | |
Ut | "Utils" has been extended with opacity, heights and colors |
1
John DoeDo you have any design-related questions or suggestions? We'd love to hear from you.
Please contact Wuiman to discuss your ideas.
Lists
Ordered/ unordered lists
- Unordered list. We use this list to group a set of related items without a particular order. There are three different types of <UL>s (unstyled, default, with icon-bullets).
- Ordered list. The wui-ol comes with two versions (default, highlighted).
- Definition list The <DL> is used to display a list of terms together with their definitions.
Unordered list
- Lorem ipsum dolor sit amet consec
- Elit voluptatum blanditiis re
- Elit voluptatum blanditiis re
- Deleniti ut asperiores digniss
Unstyled & default UL
In many cases we use the unordered list for semantic reasons but it is not necessarily recognizable as an unordered list. In these cases we add the class unstyled.
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet consec</li>
<li>Elit voluptatum blanditiis re</li>
</ul>
<ul>
<li>Elit voluptatum blanditiis re</li>
<li>Deleniti ut asperiores digniss</li>
</ul>
- A pie is a baked dish which is usually made of a pastry dough.
- A candy cane is a cane-shaped stick candy.
- Ice cream is a sweetened frozen food.
Icon list
This is one possibility how an icon list could look like. The color of the icons, the alignment to the left and the highlighting of keywords is optional.
<ul class="wui-fa-list wui-fa-list--left-aligned">
<li><span class="wui-fa-list__fa-bullet"><i class="fas fa-pie wui-color--warning"></i></span>
<strong>A pie</strong> is a baked dish which is usually made of a pastry dough.
</li>
<li><span class="wui-fa-list__fa-bullet"><i class="fas fa-candy-cane wui-color--danger"></i></span>
<strong>A candy cane</strong> is a cane-shaped stick candy.
</li>
<li><span class="wui-fa-list__fa-bullet"><i class="fas fa-ice-cream wui-color--active"></i></span>
<strong>Ice cream</strong> is a sweetened frozen food.
</li>
</ul>
Ordered list
- Lorem ipsum dolor sit amet consec
- Elit voluptatum blanditiis re
- Deleniti ut asperiores digniss
- Lorem ipsum dolor sit amet consec
- Elit voluptatum blanditiis re
Highlighted and default OL
In very long texts, such as documentations, it can happen that users overlook the default OL. In this case there is the modifier .wui-ol--highlight, which helps to attract the user's attention.
<ol class="wui-ol wui-ol--highlight">
<li>Lorem ipsum dolor sit amet consec</li>
<li>Elit voluptatum blanditiis re</li>
<li>Deleniti ut asperiores digniss</li>
</ol>
<ol class="wui-ol">
<li>Lorem ipsum dolor sit amet consec</li>
<li>Elit voluptatum blanditiis re</li>
</ol>
Definition list
- wui-definition-list. Use definition lists for a list of terms (<DT>) and corresponding definitions (<DD>).
- Truncation. By default, the elements in the DL are not truncated. However, there are use cases where the height of the DT-DD-pair is limited to one line. Note the different options for truncating the elements depending on the scenario.
Plain definition list
- Term
- Definition
- Term
- Definition
- Term
- Definition
- Term
- Definition
- Term
- Definition
<dl class="wui-definition-list">
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
</dl>
<dl class="wui-definition-list wui-definition-list--h">
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
</dl>
Definition list table
.wui-definition-list--table
- The term of the definition list is always truncated if it is to long, like you see in this example.
- Whereas the definition can also wrap to several lines. The borders and the background grow accordingly.
- Term
- Definition
.wui-definition-list--table 2 cols
- In some cases the DT-DD-pair should be wrapped in one line.
- Then both DT and DL are truncated.
- Term
- Definition
- Term
- Definition
- Term
- Definition
- Term
- Definition
- Term
- Definition
EUR 312.95
<div class="row">
<div class="col-lg-6">
<dl class="wui-definition-list wui-definition-list--table">
<dt title="In some cases the DT-DD-pair should be wrapped in one line.">In some cases the DT-DD-pair should be wrapped in one line.</dt>
<dd class="text--overflow-ellipsis" title="Then both dl and dt are truncated.">Then both DT and DL are truncated.</dd>
<dt title="Term">Term</dt>
<dd class="text--overflow-ellipsis" title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd class="text--overflow-ellipsis" title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd class="text--overflow-ellipsis" title="Definition">Definition</dd>
</dl>
</div>
<div class="col-lg-6">
<dl class="wui-definition-list wui-definition-list--table">
<dt title="Term">Term</dt>
<dd class="text--overflow-ellipsis" title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd class="text--overflow-ellipsis" title="Definition">Definition</dd>
</dl>
<div class="wui-definition-list-addendum wui-definition-list-addendum--table">
<div class="pull-left p-5 p-l-0">
<i class="fas fa-lightbulb"></i>
</div>
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<span class="wui-label wui-label--price wui-label--angular" title="EUR 312.95">
EUR 312.95
</span>
</div>
<div class="wui-inline-list__item">
<div class="wui-select__wrapper" style="width:50px;">
<div class="wui-select">
<div class="wui-select__toggle wui-form-control-group--has-icon" style="width:50px;">
<button tabindex="-1" type="button" class="wui-select__toggle-button wui-form-control"
title="">
<span class="wui-select__placeholder">1</span>
</button>
<a href="javascript:;"
class="wui-select__caret-icon wui-select__toggle-icon wui-form-control-icon"
tabindex="-1">
<i class="fa" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="wui-inline-list__item">
<div class="btn-group dropdown">
<button class="wui-btn wui-btn--primary">
<i class="fas fa-shopping-bag"></i>
</button>
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="wui-btn dropdown-toggle wui-btn--primary">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">
Option one
</a>
</li>
<li>
<a href="javascript:;">
Option two
</a>
</li>
<li>
<a href="javascript:;">
Option three
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>