##### Cards

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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.

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

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.

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

Button

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

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.

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.

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

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

Test 1
Test 2
Test 3

#### Card Size

Small

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.

This is a link This is a link

Medium

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.

This is a link This is a link

Large

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.

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

- help_outline
- widgets
- today
- mail_outline