HomeComponents

List (container)

Variations available to display a list of items using a set of predefined designs and layouts.

Refer to the list (item) page for details on the different types of list items (ex: text, link, article, icons, etc...).

Basic

The most basic list example is just a simple list of items separated by a 1 pixel line.

More options a pre-defined to allow more customisations, for example: title, CTA, no padding, no background color, etc...

Note that by default, list components have a predefined padding and a white background. This can be overwritten using specific classes (see details below).

Removing the padding is particularly useful if the list is used in a grid (or other component) where padding is already defined. Removing the default white background color can also be useful if the parent element has it's own background color defined.

Default
With title (eyebrow)
Without padding & background
  • First item
  • Second item
  • Third item
List title
  • First item
  • Second item lorem ipsum dolor sit amet
  • Third item
List title
  • First item
  • Second item
  • Third item

Usage

<!-- List -->
<div class="ui-list">

  <!-- title is optional -->
  <!-- use highlight colour (ex: primary) on the title by adding optional class "ui-list__title--highlight" -->
  <div class="ui-list__title ui-list__title--highlight">...</div>

  <!-- to remove padding: add class optional class "ui-list--no-padding" -->
  <!-- to remove white background: add optional class "ui-list--transparent" -->
  <ul class="ui-list__container">

    <!-- NOTE: "ui-list-item" is a separate component, NOT a child of "ui-list" -->
    <li class="ui-list-item">...</li>
    <li class="ui-list-item">...</li>
    <li class="ui-list-item">...</li>
  </ul>
</div>

With CTA

A CTA (call-to-action) can be added at the bottom of the list. This can be any element/component (defined by UX designs), but most probably will be a link or button.

With cta (button)
With cta (link), title & borders
  • First item
  • Second item lorem ipsum dolor sit amet adisplicium another
  • Third item
List title
  • First item
  • Second item
  • Third item
More details

Usage

<!-- List with CTA -->
<div class="ui-list">
  <ul class="ui-list__container">
    <li class="ui-list-item">...</li>
    <li class="ui-list-item">...</li>
    <li class="ui-list-item">...</li>
  </ul>

  <!-- add child element with class "ui-list__cta" -->
  <div class="ui-list__cta">

    <!-- the content could be a link, button, etc...  -->
    <!-- see documentation about link component "ui-link" -->
    <a class="ui-link" href="#">...</a>
  </div>
</div>

With Header and Description

In addition to the title (eyebrow) explained above, an optional large header can be added, with or without a description text below it.

With header
With header and description
With title (eyebrow) and description
Lorem ipsum sit dolor amet pluribus
  • First item
  • Second item
  • Third item
Lorem ipsum sit dolor amet pluribus
Morbi suscipit quis dui sed volutpat. Quisque auctor nibh massa, et scelerisque erat tempor eget.
  • First item
  • Second item
List title
Morbi suscipit quis dui sed volutpat. Quisque auctor nibh massa, et scelerisque erat tempor eget.
  • First item
  • Second item
  • Third item

Usage

<!-- List with header & description -->
<div class="ui-list">

  <!-- header -->
  <div class="ui-list__header">... <strong>...</strong></div>

  <!-- description (optional) -->
  <div class="ui-list__description">...</div>

  <ul class="ui-list__container">
    <li class="ui-list-item">...</li>
    <li class="ui-list-item">...</li>
  </ul>
</div>
Refinitiv © 2020