Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Basic Card

Basic card good at containing small bits of information.

Card Title

I am a very simple card with solid background & link. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Title

I am a very simple card with gradient background & button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Image Card

Here is the standard card with an image thumbnail.

sample Card Title

I am a very simple card with link. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

sample Card Title

I am a very simple card with button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

FABs in Cards

Here is an image card with a Floating Action Button.

Card Title add

I am a very simple card with small size solid color fab button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Title add

I am a very simple card with large size gradient color fab button. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Horizontal Card

Here is the standard card with a horizontal image.

I am a very simple card with link. I am good at containing small bits of information.

I am a very simple card with button. I am good at containing small bits of.

Card Reveal

Here you can add a card that reveals more information once clicked.

office
Card Title more_vert

This is a link

Card Title close

Here is some more information about this product that is only revealed once clicked on.

Just add the card-reveal div with a span.card-title inside to make this work. Add the class activator to an element inside the card to allow it to open the card reveal.

Card Title more_vert

This is a link

Card Title close

Here is some more information about this product that is only revealed once clicked on.

The default state is having the card-reveal go over the card-action.

Card Title more_vert

This is a link

Card Title close

Here is some more information about this product that is only revealed once clicked on.

You can make your card-action always visible by adding the class sticky-action to the overall card.

Tabs in Cards

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect

White

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Test 1
Test 2
Test 3
Colored

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Test 1
Test 2
Test 3

Card Size

Small

The Small Card limits the height of the card to 300px.

sample Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Medium

The Medium Card limits the height of the card to 400px.

sample Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Large

The Large Card limits the height of the card to 500px.

sample Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Panel

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect

I am a very simple solid color card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
I am a very simple gradient color card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
I am a very simple gradient color card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.