Lists - Flex UI Library

Lists

Bulleted

First Item
Second Item - quis est vel vitae consequatur debitis ipsam voluptatem consequatur laborum deleniti quibusdam eum culpa voluptates maxime ex harum quasi amet
Third Item
Nested List
- First Nested Item - praesentium dolorem omnis provident velit est voluptatem aut nihil omnis numquam recusandae voluptatem eveniet aspernatur odit eaque modi doloribus voluptas
- Second Nested Item
- Third Nested Item

<ul>
  <li> First Item </li>
  <li> Second Item - autem totam autem rerum voluptas explicabo saepe dolores reiciendis aut ut est fuga ut eaque non odio consectetur id temporibus </li>
  <li> Third Item </li>
  <li> Nested List
    <ul>
      <li> First Nested Item - ratione asperiores fuga maiores in soluta error est qui similique voluptatibus aliquam magni officiis voluptas quos quia ad non et </li>
      <li> Second Nested Item </li>
      <li> Third Nested Item </li>
    </ul>
  </li>
</ul>

Numbered

First Item - aut in eos corporis id accusantium qui aut et molestiae quidem nam qui praesentium commodi hic vel omnis officiis modi
Second Item
Third Item
Nested List
1. First Nested Item
2. Second Nested Item
3. Third Nested Item - eveniet blanditiis non velit rerum maxime aperiam dolores consequatur et assumenda voluptas dolores est eos aperiam esse rerum et labore

<ol>
  <li> First Item - ut autem laudantium quaerat blanditiis eos quibusdam sed esse inventore eius dolores enim sequi dicta repudiandae atque qui recusandae eaque </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Nested List
    <ol>
      <li> First Nested Item </li>
      <li> Second Nested Item </li>
      <li> Third Nested Item - dolore exercitationem reiciendis perspiciatis tenetur qui sequi odit iste laborum debitis minus molestiae impedit laudantium enim in officia quae eum </li>
    </ol>
  </li>
</ol>

Standard

Key 1

Value 1

Key 2

Value 2

Key 3

Value 3

<div class="c-container--canvas">
  <div class="c-card">
    <div class="c-list-entry">
      <div class="c-list-entry__title"> Key 1 </div>
      <div> Value 1 </div>
    </div>
    <div class="c-list-entry">
      <div class="c-list-entry__title"> Key 2 </div>
      <div> Value 2 </div>
    </div>
    <div class="c-list-entry">
      <div class="c-list-entry__title"> Key 3 </div>
      <div> Value 3 </div>
    </div>
  </div>
</div>

Sortable

MLS

Remove

Quick Search

Remove

Hot Sheet

Remove

Change Listing

Remove

Office/Member

Remove

Address

Remove

Tour/Open Houses

Remove

Market Trends

Remove

Reports - General

Remove

Reports - Users

Remove

Change User

Remove

Full Copy

Remove

Fields - Main Listings

Remove

Rosters

Remove

<div class="c-sortable-list c-card">
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      MLS
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Quick Search
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Hot Sheet
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Change Listing
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Office/Member
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Address
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Tour/Open Houses
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Market Trends
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Reports - General
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Reports - Users
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Change User
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Full Copy
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Fields - Main Listings
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
  <div class="c-list-entry">
    <div class="flexicon flexicon-bars--alt handle"></div>
    <div class="c-list-entry__title">
      Rosters
    </div>
    <a class="u-link--plain">Remove</a>
  </div>
</div>

<script>
$(function () {
  $('.c-sortable-list').sortable({
    forceFallback: true,
    fallbackClass: 'c-sortable-list__drag-item',
    ghostClass: 'c-sortable-list__ghost-item',
    handle: '.handle'
  })
});
</script>

Note: There's basically never any reason to not specify the handle class on a sortable list. Doing so, especially if items in the row are clickable can result in unintended behavior in touch environments because the page can't differentiate between a click/touch and a start drag event.