Lists

Some text here

Contents

Summary
Alert colors
Common combination

Summary

Unordered list. We use this list to group a set of related items without a particular order. There are three different types of <ul> (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

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 and ul.unstyled

Elit voluptatum blanditiis re
Deleniti ut asperiores digniss

Lorem ipsum dolor sit amet consec
Elit voluptatum blanditiis re


<ul>
<li>Elit voluptatum blanditiis re</li>
<li>Deleniti ut asperiores digniss</li>
</ul>
<hr>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet consec</li>
<li>Elit voluptatum blanditiis re</li>
</ul>

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.wui-fa-list`

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.


<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

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.wui-ol--highlight and ol.wui-ol

Lorem ipsum dolor sit amet consec
Elit voluptatum blanditiis re
Deleniti ut asperiores digniss

Lorem ipsum dolor sit amet consec
Elit voluptatum blanditiis re


<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>
<hr />
<ol class="wui-ol">
<li>Lorem ipsum dolor sit amet consec</li>
<li>Elit voluptatum blanditiis re</li>
</ol>

Definition list

Summary

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

For cards we use the modifier .wui-definition-list--h-overflow-ellipsis. This sets DT and DD inline and truncates them to ensure a constant card height (see: Cards).

Term: Definition
Term: Definition

Term: Definition
Term: Definition
Term: Definition


<dl class="wui-definition-list m-t-10">
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
</dl>
<hr />
<dl class="wui-definition-list wui-definition-list--h m-t-10">
<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

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


<dl class="wui-definition-list wui-definition-list--table m-t-10">
<dt title="The term of the definition list is always truncated if it is to long, like you see in this example.">
The term of the definition list is always truncated if it is
to long, like you see in this example.
</dt>
<dd title="Whereas the definition can also wrap to several lines. The borders and the background grow accordingly.">
Whereas the definition can also wrap to several lines. The
borders and the background grow accordingly.
</dd>
<dt title="Term">Term</dt>
<dd title="Definition">Definition</dd>
</dl>

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 m-t-10">
<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>

No wui-mono component documentation available yet.

From WUI with