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-olcomes 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>
There 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
