Basic

Rich list is a flexible and powerful component for displaying a series of content. Basic rich list has .rich-list-item where wrapping content or any elements.

Porta

Cras justo odio

Consectetur

Dapibus ac facilisis in

Vestibulum

Morbi leo risus

Border variants

By default, rich list component has 2 border versions, like the examples below.

Flush

Extend basic rich list with .rich-list-flush to appear like below.

Porta

Cras justo odio

Consectetur

Dapibus ac facilisis in
9+

Vestibulum

Morbi leo risus
new

Bordered

Extend basic rich list with .rich-list-bordered to appear like below.

Porta

Cras justo odio

Consectetur

Dapibus ac facilisis in
9+

Vestibulum

Morbi leo risus
new

Addon

Put other elements inside rich list within .rich-list-{prepend|append}

Porta

Cras justo odio

Consectetur

Dapibus ac facilisis in
9+

Vestibulum

Morbi leo risus

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

new

Action

If you want to make your rich list has clickable behavior, you must add .rich-list-action.

States

We provide active and disabled states for .rich-list-item, look the example

CS

Charlie Stone

Art Director

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Reports

Navigation

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet