Definition list

The description or definition list is used to display term pairs and descriptions (like a list of key value pairs).

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>

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 wui-definition-list--table-light wui-definition-list--table-1/3 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-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>

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

From WUI and

with

WUI is wescale’s design system