Cards - basic

This is the basic cards dersign you can give them a size by giving them a grid class (see Grids )

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

Cards - Different dephts

As the cards are directs components from Material Design, you have to follow the "paper" theory, and give them depth, to let the user know at which level the card is standing to. You have to think about the Z-axis, where 1 is closer to the back, and 5 is over everything.

To indicate the current Depth of your card, add a custom attribute data-depth="1" ( 5 is the max value )

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

A simple card

Some text..

Cards With Divider

Maybe you will need to put a divider element into your cards ? Then just add a <span class="divider"></span> between the .inner__card section and the <footer>

A simple card

Some text..

A simple card

Some text..

Cards - DatePicker

Here is a cool component that works with cards, a datepicker.