Cards

help

Card Panel

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 similar to what is called a panel in other frameworks.

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

Basic Card

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.

Image Card

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.

Here is the standard card with an image thumbnail.

FABs in Cards

Here is an image card with a Floating Action Button.

Card Title add

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.

Here is an image card with a large Floating Action Button.

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

Horizontal Card

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

Here is the standard card with a horizontal image.

Card Reveal

Card Titlemore_vert

This is a link

Card Titleclose

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

Here you can add a card that reveals more information once clicked. 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 Action Options

Here is an image card with a Floating Action Button.

image
Card Titlemore_vert

This is a link

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

image
Card Titlemore_vert

This is a link

Tabs in Cards

Basic white background card with tabs.

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 or dark background card with tabs.

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 2

Card Sizes

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

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.

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

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.

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

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.