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.
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
Here is the standard card with an image thumbnail.
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.
Card Reveal
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.
Here is some more information about this product that is only revealed once clicked on.
Card Panel
For a simpler card with less markup, try using a card panel which just has padding and a shadow effect
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.
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.
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.