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.

Eleanor Pena

Sent you a detailed message regarding the upcoming project deadline and requested your feedback.

Courtney Henry

Placed a new order containing multiple products including electronics, furniture.

9+

Albert Flores

Successfully completed the payment of $250 for the monthly subscription plan and upgraded.

New

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.

Eleanor Pena

Sent you a detailed message regarding the upcoming project deadline and requested your feedback.

Courtney Henry

Placed a new order containing multiple products including electronics, furniture.

9+

Albert Flores

Successfully completed the payment of $250 for the monthly subscription plan and upgraded.

New

Bordered

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

Eleanor Pena

Sent you a detailed message regarding the upcoming project deadline and requested your feedback.

Courtney Henry

Placed a new order containing multiple products including electronics, furniture.

9+

Albert Flores

Successfully completed the payment of $250 for the monthly subscription plan and upgraded.

New

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

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

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