Basic Cards

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.

This is a linkThis is a link
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.

Button

Image Card

Here is the standard card with an image thumbnail.

sampleCard 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.

This is a linkThis is a link
sampleCard 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.

Button

FABs in Cards

Here is an image card with a Floating Action Button.

Card Titleadd

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 Titleadd

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.

This is a link

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

Button

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-revealdiv with a span.card-titleinside to make this work. Add the class activatorto 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.

This is a linkThis is a link

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

Card Title more_vert

This is a link

This is a linkThis 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-actionto 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.

Low-hanging fruit,social innovation do-gooder state of play families resist collaborative consumption justice. Strategize NGO effective altruism changemaker game-changer,social.
social innovation
Empower change-makers;a challenges and opportunities collective impact collaborate.
Revolutionary,expose the truth shine benefit corporation,activate incubator revolutionary co-create.
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.

Low-hanging fruit,social innovation do-gooder state of play families resist collaborative consumption justice. Strategize NGO effective altruism changemaker game-changer,social.
social innovation
Empower change-makers;a challenges and opportunities collective impact collaborate.
Revolutionary,expose the truth shine benefit corporation,activate incubator revolutionary co-create.Revolutionary,expose the truth shine benefit corporation

Card Size

Small

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

sampleCard Title

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

This is a linkThis is a link

Medium

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

sampleCard 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.

This is a linkThis is a link

Large

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

sampleCard 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. 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. 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.

This is a linkThis is a link

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.
add