List styles do not explicity require ul and li elements, but can be composed with them. Anything should work: divs, div and as, nav and as, etc.
.list-group .list-group-item Andy Warhol, Soup Can, Vegetarian Vegetable, 1964 .list-group-item Jim Houser, GNRS, 2013 .list-group-item Souther Salazar, 6-Legged Octopus Tower, 2009
.list-group.is-notice .list-group-item Andy Warhol, Soup Can, Vegetarian Vegetable, 1964 .list-group-item Jim Houser, GNRS, 2013 .list-group-item Souther Salazar, 6-Legged Octopus Tower, 2009
.list-group
%a.list-group-item{ href: '#' }
.list-group-item-content Andy Warhol, Soup Can, Vegetarian Vegetable, 1964
.icon-chevron-right
%a.list-group-item{ href: '#' }
.list-group-item-content Jim Houser, GNRS, 2013
.icon-chevron-right
%a.list-group-item{ href: '#' }
.list-group-item-content Souther Salazar, 6-Legged Octopus Tower, 2009
.icon-chevron-right
/ Note the formatting differences between .list-group-item-label and
/ .list-group-item-artist-name
.list-group
%a.list-group-item{ href: '#' }
.list-group-item-content
.list-group-item-artist-name Andy Warhol
.list-group-item-info Soup Can, Vegetarian Vegetable, 1964
.icon-chevron-right
%a.list-group-item{ href: '#' }
.list-group-item-content
.list-group-item-label Andy Warhol
.list-group-item-info Soup Can, Vegetarian Vegetable, 1964
.icon-chevron-right
.list-group
%a.list-group-item{ href: '#' }
.list-group-item-image
%img{ src: "/images/hurricaneLXXXIV-03949ffb.png" }
.list-group-item-content
.list-group-item-artist-name Clifford Ross
.list-group-item-info Hurricane LXXXIV, 2008
.icon-chevron-right
%a.list-group-item{ href: '#' }
.list-group-item-image
%img{ src: "/images/cliff-1a64186e.png" }
.list-group-item-content
.list-group-item-artist-name Hiroshi Senju
.list-group-item-info Cliff, 2013
.icon-chevron-right
%a.list-group-item{ href: '#' }
.list-group-item-image
%img{ src: "/images/trees_in_snow-7a7532bb.png" }
.list-group-item-content
.list-group-item-artist-name Josef Hoflehner
.list-group-item-info Trees in Snow, 2005
.icon-chevron-right
.list-group
.list-group-item
.list-group-item-content
.list-group-item-label Andy Warhol
.list-group-item-info Soup Can, Vegetarian Vegetable, 1964
.list-group-item-actions
%a.btn.btn-primary.btn-small Edit
.list-group
.list-group-item
.list-group-item-content
.list-group-item-label Andy Warhol
.list-group-item-info Soup Can, Vegetarian Vegetable, 1964
.list-group-item-actions
%a.btn.btn-primary.btn-small Edit
%a.btn.btn-secondary.btn-delete.btn-small Delete
.list-group
.list-group-item
.list-group-item-content
.list-group-item-info Artist CV
.list-group-item-icons
.list-group-item-action.list-group-item-download
%a.btn.btn-secondary.btn-small{ href: '#' } Download
%a.btn-icon{ href: '#' }
/= render svg partial here
.list-group-item-action.list-group-item-edit
%a.btn.btn-secondary.btn-small{ href: '#' } Edit
%a.btn-icon{ href: '#' }
/= render svg partial here
.list-group.list-group-tabular
.list-group-item.list-group-item-with-icons
.list-group-item-image
%img{ src: "/images/trees_in_snow-7a7532bb.png" }
.list-group-item-content
.list-group-item-content-sub
.list-group-item-artist-name Josef Hoflehner
.list-group-item-info
%em Trees in Snow, 2005
.list-group-item-content-sub
.list-group-item-info 32 works
.list-group-item-info 19 published to Artsy
.list-group-item-info 12 works for sale
.list-group-item-content-sub
%em Published
.list-group-item-icons
.list-group-item-action.list-group-item-download
%a.btn.btn-secondary.btn-small{ href: '#' } Download
%a.btn-icon{ href: '#' }= partial 'svgs/download'
.list-group-item-action.list-group-item-edit
%a.btn.btn-secondary.btn-small{ href: '#' } Edit
%a.btn-icon{ href: '#' }= partial 'svgs/circle_edit'
// For filters and sort to work properly
// application needs to load javascript from this file: vendor/assets/javascripts/watt/filters
.list-controls
%form.simple_form.watt-filters{ id: 'artists-filters', action: 'artists_controller_index', method: 'get' } // form.watt-filters required
.list-controls-row
.list-control-filter
.form-group.select.filter_state
// all select changes trigger from submission
%select.select.required.form-control{ name: 'filter[state]', id: 'filter_state' }
%option{ value: 'all', selected: 'selected' } Select State
%option{ value: 'active' } Active
%option{ value: 'completed' } Completed
%option{ value: 'failed' } Failed
.list-control-filter
.form-group.select.filter_visibility
%select.select.required.form-control{ name: 'filter[visibility]', id: 'filter_visibility' }
%option{ value: 'all', selected: 'selected' } Filter by visibility
%option{ value: '1' } Visible
%option{ value: '0' } Invisible
.list-controls-row
.list-control-counts
Viewing 1 - 5 of 37 Artists
.list-control-sorting.hidden-xs
Sorted by:
// all .sort_option clicks will trigger from submission
// each sort_option expected to have a valid sort value attribute
%span.sort_option{ value: 'az' }
A-Z
.sort_separator /
%span.active.sort_option{ value: 'most_recent' }
Most Recent
%input{ value: 'most_recent', type: 'hidden', name: 'filter[sort]', id: 'filter_sort' }
/ Best used when the list is the bulk of the page content. .list-group / Note the emptiness! .list-group-empty-message This show contains no documents.
/ Use the bordered empty when the page has groups of lists
/ under section headings.
.clearfix.section-header
%h3 Press and Documents
.section-actions
%a.btn.btn-primary.btn-small.btn-add{ href: "" } Add a Document
.list-group
/ Note the emptiness!
.list-group-empty-message-bordered
This show contains no documents.