Lists

Guidelines:

• The list header (the heading above the list) should be an h5
• Max of 6 columns
• Max of 3 lines inside a row (truncate if necessary)
• If there is more than 1 column:
  • Normally, the first two columns will be the primary content and will always remain on screen
• If there are greater than or equal to 3 columns:
  • A third column is permitted on smaller screens IF it is an action item or a small secondary identifier
• The first column may only contain one item from the following list:
  • Toggle element (Checkbox, icon toggle)
  • Small image or icon identifier
  • Text
• If the row contains an action item it must be in the far right column. The action item can one of the following:
  • Right chevron - Indicating travel to another page
  • Down chevron - Indicating a collapsible element that toggles hidden body
  • An overflow menu (three vertical dots) - Can contain a menu of actionable links like edit and delete

List rows with grey hover

folder
List Item Label
Data Data Data Data
• folder
  Chelsea Towne Living NY_New York City
  10th Feb 2017 22 Articles 12-26-16

%h5.mt-8.mb-2 List rows with grey hover
%ul.list-group.list-group-flush
  %a.list-group-item.u-hover--grey{href: "#"}
    .d-flex.flex-column.col-3.col-sm-2.col-md-1
      %div
        %i.material-icons.white-text.grey.p-1.rounded-circle folder
    .d-flex.flex-column.grey-text.text-darken-4.col-7.col-xl-3.col-lg-5
      List Item
      %small.grey-text.text-darken-2 Label
    %small.d-flex.flex-column.grey-text.text-darken-2.col-2.col-sm-3.col-md-2
      Data
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
      Data
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
      Data
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
      Data
  %li.list-group-item.list-group-item--link.u-hover--grey
    .d-flex.flex-column.col-3.col-sm-2.col-md-1
      %div
        %i.material-icons.white-text.grey.p-1.rounded-circle folder
    .d-flex.flex-column.col-7.col-xl-3.col-lg-5
      Chelsea Towne Living
      %small.grey-text.text-darken-2 NY_New York City
    %small.d-flex.flex-column.grey-text.text-darken-2.col-2.col-sm-3.col-md-2
      10th
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
      Feb 2017
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
      22 Articles
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
      12-26-16

List rows with box shadow hover and primary and secondary actions

Fenway Life MA_Boston
10th Feb 2017 22 Articles 12-10-16
Windy City Post IL_Chicago
15th Feb 2017 28 Articles 12-20-16
Windy City Post IL_Chicago
15th Feb 2017 28 Articles 12-20-16

%h5.mt-8.mb-2 List Header
%ul.list-group.list-group-flush
  %a.list-group-item.u-hover--raised{href: "#"}
    .d-flex.flex-column.align-items-center.justify-content-center.col-3.col-sm-2.col-md-1
      %input.filled-in#checkbox1{ type: :checkbox }
      %label{ for: :checkbox1 }
    .d-flex.flex-column.grey-text.text-darken-2.col-7.col-xl-3.col-lg-5
      Fenway Life
      %small.grey-text.text-darken-2 MA_Boston
    %small.d-flex.flex-column.grey-text.text-darken-2.col-2.col-sm-3.col-md-2
      10th
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
      Feb 2017
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
      22 Articles
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
      12-10-16
  %a.list-group-item.u-hover--raised
    .d-flex.flex-column.align-items-center.justify-content-center.col-3.col-sm-2.col-md-1
      %input.filled-in#checkbox2{ type: :checkbox }
      %label{ for: :checkbox2 }
    .d-flex.flex-column.grey-text.text-darken-2.col-7.col-xl-3.col-lg-5
      Windy City Post
      %small.grey-text.text-darken-2 IL_Chicago
    %small.d-flex.flex-column.grey-text.text-darken-2.col-2.col-sm-3.col-md-2
      15th
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
      Feb 2017
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
      28 Articles
    %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
      12-20-16
%a.list-group-item.u-hover--raised
  .d-flex.flex-column.align-items-center.justify-content-center.col-3.col-sm-2.col-md-1
    %input.filled-in#checkbox3{ type: :checkbox }
    %label{ for: :checkbox3 }
  .d-flex.flex-column.grey-text.text-darken-2.col-7.col-xl-3.col-lg-5
    Windy City Post
    %small.grey-text.text-darken-2 IL_Chicago
  %small.d-flex.flex-column.grey-text.text-darken-2.col-2.col-sm-3.col-md-2
    15th
  %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
    Feb 2017
  %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
    28 Articles
  %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
    12-20-16

List Header

• folder

  List Item Label

  Data Data Data

  keyboard_arrow_down

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium, odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis. Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem varius eu. Cras non sollicitudin orci. Nulla facilisi.

  Integer commodo dui et mauris viverra, eget mattis nulla condimentum. Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo, id eleifend nisi pharetra nec. Suspendisse mollis augue ligula. Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna. Quisque consequat mi id turpis lacinia varius. Duis pharetra diam nec viverra pellentesque. Nullam tincidunt ex elit.

• folder

  Chelsea Towne Living NY_New York City

  10th Feb 2017 12-26-16

  keyboard_arrow_down

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium, odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis. Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem varius eu. Cras non sollicitudin orci. Nulla facilisi.

  Integer commodo dui et mauris viverra, eget mattis nulla condimentum. Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo, id eleifend nisi pharetra nec. Suspendisse mollis augue ligula. Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna. Quisque consequat mi id turpis lacinia varius. Duis pharetra diam nec viverra pellentesque. Nullam tincidunt ex elit.

To get a rotating chevron use the 'rotate-icon' class on the icon inside the collapsible header

%h5.mt-8.mb-2 List Header
%ul.list-group.collapsible{ data: { collapsible: :expandable } }
  %li.list-group-item
    .collapsible-header.d-flex.w-100.align-items-center.cursor-pointer
      .d-flex.flex-column.col-3.col-sm-2.col-md-1
        %div
          %i.material-icons.white-text.grey.p-1.rounded-circle folder
      .d-flex.flex-column.col-7.col-xl-3.col-lg-5
        List Item
        %small.grey-text.text-darken-2 Label
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
        Data
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
        Data
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
        Data
      .d-flex.flex-column.grey-text.text-darken-2.align-items-center.col-2.col-sm-3.col-md-2
        %i.material-icons.rotate-icon keyboard_arrow_down
    .collapsible-body
      .pl-2.py-3
        %p
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
          lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
          odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
          volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
          Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
          varius eu. Cras non sollicitudin orci. Nulla facilisi.
        %p
          Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
          Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue
          euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo,
          id eleifend nisi pharetra nec. Suspendisse mollis augue ligula.
          Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna.
          Quisque consequat mi id turpis lacinia varius. Duis pharetra diam
          nec viverra pellentesque. Nullam tincidunt ex elit.

  %li.list-group-item
    .collapsible-header.d-flex.w-100.align-items-center.cursor-pointer
      .d-flex.flex-column.col-3.col-sm-2.col-md-1
        %div
          %i.material-icons.white-text.grey.p-1.rounded-circle folder
      .d-flex.flex-column.col-7.col-xl-3.col-lg-5
        Chelsea Towne Living
        %small.grey-text.text-darken-2 NY_New York City
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-sm-down.col-2
        10th
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-md-down.col-2
        Feb 2017
      %small.d-flex.flex-column.grey-text.text-darken-2.hidden-lg-down.col-2
        12-26-16
      .d-flex.flex-column.grey-text.text-darken-2.align-items-center.col-2.col-sm-3.col-md-2
        %i.material-icons.rotate-icon keyboard_arrow_down
    .collapsible-body
      .pl-2.py-3
        %p
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
          lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
          odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
          volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
          Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
          varius eu. Cras non sollicitudin orci. Nulla facilisi.
        %p
          Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
          Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus
          augue euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin
          nisi justo, id eleifend nisi pharetra nec. Suspendisse mollis augue
          ligula. Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet
          quam magna. Quisque consequat mi id turpis lacinia varius. Duis
          pharetra diam nec viverra pellentesque. Nullam tincidunt ex elit.

• Name
  Darth Vader
  more_vert

  • main
  • one
  • two
  • three and four
• Phone
  919-218-0819
  more_vert

  • main
  • one
  • two
  • three and four

%ul.list-group.mb-2
  %li.list-group-item
    .d-flex.flex-column.col-5
      Name
    .d-flex.flex-column.col-6
      Darth Vader
    .d-flex.flex-column.col-1.p-0
      %a.dropdown-button{ "data-activates" => "dropdown1", href: "#" }
        %i.material-icons more_vert

      %ul.dropdown-content#dropdown1
        %li
          %a.black-text{ href: "#!" } main
        %li.divider
        %li
          %a.black-text{ href: "#!" } one
        %li
          %a.black-text{ href: "#!" } two
        %li
          %a.black-text{ href: "#!" } three and four
  %li.list-group-item
    .d-flex.flex-column.col-5
      Phone
    .d-flex.flex-column.col-6
      919-218-0819
    .d-flex.flex-column.col-1.p-0
      %a.dropdown-button{ "data-activates" => "dropdown2", href: "#" }
        %i.material-icons more_vert

      %ul.dropdown-content#dropdown2
        %li
          %a.black-text{ href: "#!" } main
        %li.divider
        %li
          %a.black-text{ href: "#!" } one
        %li
          %a.black-text{ href: "#!" } two
        %li
          %a.black-text{ href: "#!" } three and four

• 100 Pages
  Jan. 1, 2017 Date
  more_vert
  • Edit
  • Delete

%ul.list-group.without-hover
  %li.list-group-item
    .d-flex.flex-column.col-5
      100
      %small.grey-text.text-darken-2 Pages
    .d-flex.flex-column.col-5
      Jan. 1, 2017
      %small.grey-text.text-darken-2 Date
    %small.d-flex.flex-column.grey-text.text-darken-2.col-2
      %a.dropdown-button{ "data-activates" => "dropdown3", href: "#" }
        %i.material-icons more_vert
      %ul.dropdown-content#dropdown3
        %li
          %a.black-text{ href: "#!" } Edit
        %li
          %a.black-text{ href: "#!" } Delete

• Title

  keyboard_arrow_down

  Photos

  4

  Word Count

  624

  Status

  -

  Territory

  NY_Upper New York

  Date Modified

  09/04/17

• Title

  keyboard_arrow_down

  Photos

  4

  Word Count

  624

  Status

  -

  Territory

  NY_Upper New York

  Date Modified

  09/04/17

%ul.list-group.collapsible.col-12.pl-0.pr-0.mb-2{ data: { collapsible: :expandable } }
  = collapsible_list_item("Title", {}) do
    .d-flex.flex-row.col-12
      .d-flex-flex-column.col-4
        %h6.grey-text Photos
        4
      .d-flex-flex-column.col-4
        %h6.grey-text Word Count
        624
      .d-flex-flex-column.col-4
        %h6.grey-text Status
        \-
    .d-flex.flex-row.col-12.mt-2
      .d-flex-flex-column.col-4
        %h6.grey-text Territory
        NY_Upper New York
      .d-flex-flex-column.col-4
        %h6.grey-text Date Modified
        = link_to "09/04/17", "#!"
      .d-flex-flex-column.col-4
  = collapsible_list_item("Title", {}) do
    .d-flex.flex-row.col-12
      .d-flex-flex-column.col-4
        %h6.grey-text Photos
        4
      .d-flex-flex-column.col-4
        %h6.grey-text Word Count
        624
      .d-flex-flex-column.col-4
        %h6.grey-text Status
        \-
    .d-flex.flex-row.col-12.mt-2
      .d-flex-flex-column.col-4
        %h6.grey-text Territory
        NY_Upper New York
      .d-flex-flex-column.col-4
        %h6.grey-text Date Modified
        = link_to "09/04/17", "#!"
      .d-flex-flex-column.col-4