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.

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.

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.

sample Card Title

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

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

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.
settings
close
Theme Customizer

Customize & Preview in Real Time

Navbar Options

Footer Options

add_shopping_cart