HomeComponents

List (item)

Variations available for items inside list component.

Refer to the list (container) page for details on the different types of list container (title, header, borders, padding, etc...).

Default

Text
Text with icon
Link
Link with icon
  • First item
  • Second item
  • First item
  • Second item
  • Third item

Usage

<!-- text -->
<li class="ui-list-item">
  <div class="ui-list-item__text">...</div>
</li>


<!-- text with icon -->
<li class="ui-list-item">

  <!-- place the icon before the text -->
  <i class="ui-icon ui-icon--orders"></i>
  <div class="ui-list-item__text">...</div>
</li>


<!-- link -->
<li class="ui-list-item">

  <!-- place a "ui-link" component directly inside "ui-list-item" -->
  <!-- see documentation of link component for details of implementation -->
  <a class="ui-link" href="#">...
    <i class="ui-icon ui-icon--arrowRight"></i>
  </a>
</li>


<!-- link with icon -->
<li class="ui-list-item">
  <i class="ui-icon ui-icon--orders"></i>
  <a class="ui-link" href="#">...
    <i class="ui-icon ui-icon--arrowRight"></i>
  </a>
</li>

With meta data

  • Meta data
    First item
  • Meta data
    Second item
  • Meta data
    First item
  • Meta data
    Second item
  • Meta data
    Third item

Usage

<!-- with meta data -->
<li class="ui-list-item">

  <!-- add a "ui-list-item__meta" before the rest of the content -->
  <div class="ui-list-item__meta">...</div>
  <div class="ui-list-item__text">...</div>
</li>


<!-- meta data with link and icon -->
<li class="ui-list-item">
  <div class="ui-list-item__meta">...</div>
  <i class="ui-icon ui-icon--orders"></i>
  <a class="ui-link" href="#">...</a>
</li>

With description

  • First item
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Second item
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Meta data
    First item
    Lorem ipsum dolor
  • Meta data
    Second item
    Lorem ipsum dolor
  • First link
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Second link
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Meta data
    First link
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Meta data
    Second link
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Usage

<!-- with description -->
<li class="ui-list-item">
  <div class="ui-list-item__text">...</div>

  <!-- add description below all other elements -->
  <div class="ui-list-item__description">...</div>
</li>


<!-- description with meta, icon and link -->
<li class="ui-list-item">
  <div class="ui-list-item__meta">...</div>
  <i class="ui-icon ui-icon--orders"></i>
  <a class="ui-link" href="#">...</a>
  <div class="ui-list-item__description">...</div>
</li>

Article

  • Item title
    First item
  • Item title
    Second item
  • Item title
    First item
  • Item title
    Second item

Usage

<!-- Article -->
<li class="ui-list-item ui-list-item--article">

  <!-- add an element with class "ui-list-item__title" -->
  <div class="ui-list-item__title">...</div>

  <!-- same "ui-list-item__text" as usual -->
  <div class="ui-list-item__text">...</div>
</li>


<!-- Article with link -->
<!-- same as above but with "ui-link" instead of text -->
<li class="ui-list-item ui-list-item--article">
  <div class="ui-list-item__title">...</div>
  <a class="ui-link" href="#">...</a>
</li>

With icon aligned top

Text with icon
Link with icon
  • First
    item
  • Second
    item
  • Third item

Usage

<!-- text with icon -->
<li class="ui-list-item">

  <!-- place the icon before the text -->
  <i class="ui-icon ui-icon--orders ui-icon--top-align"></i>
  <div class="ui-list-item__text">...</div>
</li>


<!-- link with icon -->
<li class="ui-list-item">
  <i class="ui-icon ui-icon--orders ui-icon--top-align"></i>
  <a class="ui-link" href="#">...
    <i class="ui-icon ui-icon--arrowRight ui-icon--top-align"></i>
  </a>
</li>
Refinitiv © 2020