Build amazing sites with this great collection of componentsBuy Now

Cards

Cards help to organize content

Cards contain content — text and pictures — and actions about a single subject. Card layout is an integral part of material design. The 'card effect' is often achieved by using shadows, which gives the illusion of depth, or by a slight color difference.

Cards can be used to set items apart and or to attract attention to them. They should be easy to scan for relevant and actionable information. Cards are also great for presenting different content harmoniously.


Basic Card

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.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Basic Card Variations

The second card component here uses the .small-card class to constrain the width to 320px.

did he really say that?

Something are very quotable.

Trending up

Somethings are very quotable. It's a story about stories.

Read it too
141
551

Image Card

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. 

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Action Button Card

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

button
Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

button

Floating Action Button Card

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

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Horizontal Card

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Reveal Cards

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.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Coming Soon: Collapsible Cards

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.

Placeholder Picture
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Colored Shadow Cards

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.

Placeholder Picture
Colored shadows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Colored shadows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Placeholder Picture
Colored shadows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.


Profile Cards

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

Placeholder Picture
Web Designer

I love desiging for the web, especially with the CoffeeCup aps. They allow me to focus on the content and  creativity — not code.

Placeholder Picture
artisteer

I love desiging for the web, especially with the CoffeeCup aps. They allow me to focus on the content and  creativity — not code.



There is some copyright thingy going here too. Feel free to do whatever you want with it after purchase [except resell without significant modification].