Basic Cards
Basic card good at containing small bits of information.
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.
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](../../../app-assets/images/gallery/4.png)
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](../../../app-assets/images/gallery/3.png)
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.
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.
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.
![](../../../app-assets/images/gallery/11.png)
I am a very simple card with link. I am good at containing small bits of information.
![](../../../app-assets/images/gallery/18.png)
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](../../../app-assets/images/gallery/12.png)
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.
![](../../../app-assets/images/gallery/19.png)
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.
![](../../../app-assets/images/gallery/21.png)
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.
social innovation
Empower change-makers; a challenges and opportunities collective impact collaborate.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.
social innovation
Empower change-makers; a challenges and opportunities collective impact collaborate.Card Size
Small
The Small Card limits the height of the card to 300px.
![sample](../../../app-assets/images/gallery/23.png)
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](../../../app-assets/images/gallery/25.png)
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](../../../app-assets/images/gallery/28.png)
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