menu
White logo

Lists

Guidelines:

List rows with grey hover
%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
%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

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.
%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
%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
%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