Rich-list
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 odioConsectetur
Dapibus ac facilisis inVestibulum
Morbi leo risusBorder 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 odioConsectetur
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 odioConsectetur
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 odioConsectetur
Dapibus ac facilisis in
9+
Vestibulum
Morbi leo risusUt 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
