Listview Listviews are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Basic example
Basic listing with text lines
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Per an error perpetua, fierent fastidii recteque ad pro. Mei id brute intellegam
Dulla vel metus scelerisque ante sollicitudin commodo purus odio
Per an error perpetua, fierent fastidii recteque ad pro. Mei id brute intellegam
Wel ea elit iuvaret. Mea labitur definitiones ex, id atqui accusata vix, vim nibh mandamus ad
Checkboxes
Basic listing with checkbox and text lines
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Per an error perpetua, fierent fastidii recteque ad pro. Mei id brute intellegam
Dulla vel metus scelerisque ante sollicitudin commodo purus odio
Per an error perpetua, fierent fastidii recteque ad pro. Mei id brute intellegam
Wel ea elit iuvaret. Mea labitur definitiones ex, id atqui accusata vix, vim nibh mandamus ad
Headings
Heading text can be added by wrapping the content on .listview__heading
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula
Attributes
You can also display information as attributes.
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Media
Add image or character as a media entry.
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula
Action links
Add actions links using .actions
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula
Hoverable list items
Use class .listview--hover
on .listview
to make list items hoverable.
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula
Striped rows
Use class .listview--striped
on .listview
to make list items striped.
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula
Bordered
Use class .listview--bordered
on .listview
to make list items Bordered.
Donec congue tempus ligula, varius hendrerit mi hendrerit sit amet. Duis ac quam sit amet leo feugiat iaculis
Aliquam fringilla neque sit amet libero convallis ac consequat nulla iaculis urabitur placerat mi sed massa euismod, a tincidunt enim tinciduntam porttitor lorem ac pharetra semper
Etiam cursus lorem eget sapien euismod, ac elementum urna tempusonec dapibus
Suspendisse aliquam sapien vitae elit ornare accumsan in dictum eratraesent pulvinar eros
Suspendisse ullamcorper purus efficitur lorem hendrerit, rhoncus dignissim lorem vehicula