Cards

The main effect is created by adding the .card class to a container (div). Then the card can be built up with different sections such as the card header, card content and card action sections.

When using color classes such as .teal this is super fast, and variations can easily be created.

In the card components below the default width is set to 400 pixels. That can easily be changed to any width of your choice, including a max- or min-width.

The images in the cards below are randomly fetched from picsum photos. When you use your own images make sure there is enough contrast and the text is always readable using the .text-darken or accent classes. 

Placing the Action Button on the border of the image and content creates a clear call to action.

I found that the best bet to pull this off in a consistent and controlled manner is using a background image and setting a width on the image container (which has the background image).

In the card components below the default width is set to 400 pixels. That can easily be changed to any width of your choice, including a max- or min-width.

These cards provide a cool interactive effect, the additional information slides over the card once clicked. This approach allows for the user to discover more details if he or she is interested in what the card provides.

By default the 'reveal content' slide over the entire card. By adding the class .sticky-action to the card container the card action part will remain visible. The third card below shows this behavior.

The concept: a card where the additional information can be dismissed or collapsed by the user. That way he or she can reveal or hide extra information while the primary content remains visible.

These cards totally catch the eye by providing a colored 'glow' or shadow effect below the picture. This effect is created with a background image in the container underneath the picture.

When you can the image, add the exact same image to the ID of the container underneath the picture to create the colored shadow.

Present yourself, employees or customers through a fancy profile card!