# Sortable cards with persistent state

##### Default Card

You can drag and drop cards to sort them. The new position is saved and will be restored when you reload this page.

When you toggle or close a card, its state is saved and will be restored upon page reload.

You can reset cards back to their original position and state.

##### Table

User | Email | Status
--- | --- | ---
Alex | alex@email.com | Pending
Fred | fred@email.com | Approved
John | john@email.com | Blocked
James | james@email.com | Online

##### Small & Collapsed by Default

Sapien et ligula ullamcorper malesuada proin libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis.

##### Big Header with Progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!

##### With Badge

16%

Est placerat in egestas erat. Arcu bibendum at varius vel pharetra vel turpis. Tristique risus nec feugiat in fermentum posuere urna nec.

Vel pharetra vel turpis nunc eget lorem dolor sed. Egestas purus viverra accumsan in. Amet massa vitae tortor condimentum lacinia quis vel eros donec.

Neque vitae tempus quam pellentesque nec nam!

##### With Distance

9%

Est placerat in egestas erat. Arcu bibendum at varius vel pharetra vel turpis. Tristique risus nec feugiat in fermentum posuere urna nec.

Neque vitae tempus quam pellentesque nec nam!

##### With Toolbox

65%
16%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur. Etiam justo nisl, gravida id egestas eu, eleifend vel metus. Pellentesque tellus ipsum, euismod in facilisis quis, aliquet quis sem.

##### With Footer

Accumsan sit amet nulla facilisi morbi tempus iaculis. Convallis a cras semper auctor neque vitae tempus quam. Ut consequat semper viverra nam libero justo.

Laoreet sit amet. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae.

##### Tabbed

1. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

2. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

3. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

##### Tabbed

1. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

2. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

3. Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.

Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.

Quis viverra nibh cras pulvinar. Netus et malesuada fames ac.

##### Scroll Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sapien et ligula ullamcorper malesuada proin libero. Ut venenatis tellus in metus vulputate. Nec tincidunt praesent semper feugiat. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Sem fringilla ut morbi tincidunt augue interdum velit. In vitae turpis massa sed. Feugiat vivamus at augue eget arcu dictum. Dictum sit amet justo donec. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Quam id leo in vitae turpis massa sed. Lorem ipsum dolor sit amet. Ut consequat semper viverra nam libero justo laoreet. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Montes nascetur ridiculus mus mauris vitae ultricies leo. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Rhoncus mattis rhoncus urna neque.

Nibh sed pulvinar proin gravida hendrerit lectus a. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Quis viverra nibh cras pulvinar. Netus et malesuada fames ac. Sed risus ultricies tristique nulla aliquet enim tortor at. Eu turpis egestas pretium aenean. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Egestas dui id ornare arcu odio ut sem nulla.

Commodo odio aenean sed adipiscing diam donec. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Mauris a diam maecenas sed enim. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Tincidunt lobortis feugiat vivamus at augue eget arcu. Blandit cursus risus at ultrices mi tempus imperdiet. Porta nibh venenatis cras sed felis eget velit aliquet sagittis. Ultrices dui sapien eget mi. Sit amet aliquam id diam maecenas. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Velit ut tortor pretium viverra suspendisse potenti. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Ultricies leo integer malesuada nunc vel risus commodo. Odio morbi quis commodo odio aenean sed adipiscing. Dignissim enim sit amet venenatis urna cursus eget. Accumsan in nisl nisi scelerisque eu ultrices vitae. Elit sed vulputate mi sit amet mauris. Varius duis at consectetur lorem donec massa. Orci sagittis eu volutpat odio facilisis mauris sit amet massa.

Est placerat in egestas erat. Arcu bibendum at varius vel pharetra vel turpis. Tristique risus nec feugiat in fermentum posuere urna nec. Vel pharetra vel turpis nunc eget lorem dolor sed. Egestas purus viverra accumsan in. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Nullam vehicula ipsum a arcu cursus. Vehicula ipsum a arcu cursus vitae congue. Purus ut faucibus pulvinar elementum integer enim neque. Odio ut sem nulla pharetra diam sit amet nisl. Maecenas accumsan lacus vel facilisis. Hendrerit gravida rutrum quisque non tellus. Augue eget arcu dictum varius duis at. Id diam maecenas ultricies mi eget. Nisl nunc mi ipsum faucibus.

##### Contextual

16%

Commodo odio aenean sed adipiscing diam donec. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Mauris a diam maecenas sed enim.

Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Tincidunt lobortis feugiat vivamus at augue eget arcu.

Neque vitae tempus quam pellentesque nec nam. Accumsan sit amet nulla facilisi morbi tempus iaculis. Convallis a cras semper auctor neque vitae tempus quam.

Blandit cursus risus at ultrices mi tempus imperdiet. Porta nibh venenatis cras sed felis eget velit aliquet sagittis.