A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and reveal secondary info.

Basic card

Cards require a small amount of markup and classes to provide you with as much control as possible. Use the class no-border to remove the box-shadow. Add class transparent to remove the cards background color, or use any of the color names from the palette as a class to change the cards background color.

Card Title

This is a basic card with a card-title and a card-footer.

Debitis, sunt, consequatur architecto accusamus itaque eveniet voluptatibus sed ea autem eligendi fugiat hic tempora!

Card with Theme color

This is a basic card with a card-title and a card-footer.
Debitis, sunt, consequatur architecto accusamus itaque eveniet voluptatibus sed ea autem eligendi fugiat hic tempora!

Card with image

Add an image inside an element with the class card-image. You can also add a title or label to the image.

Aron Chandler

4 hrs ago

Road Trip
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, voluptas.

Card Reveal

Additional information will be revealed when clicking on an element with the class activator. Add the class activator to as many elements as you like (e.g. tilte, image, buttons).

For this example the additional info will be revealed when clicking on the floating button or the title.

Somewhere Beach

4.5 42 reviews 18 miles

Somewhere Beach

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, ullam ea repellendus ipsa velit suscipit cupiditate!

Victor Vainish

Victor Vainish
Profile card

A Profile card which will reveal additional info on hover.

Alicia Lopez

@alicia

A short description goes here.

1258

Tweets

63

Followers

136

Following

Media Card

Cupiditate alias

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, ullam ea repellendus ipsa velit suscipit cupiditate!

24
aug 2016

New Event:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, ullam ea repellendus ipsa velit suscipit cupiditate!

sign up
Sign Up
Twitter type cards

On click the card action buttons will open.

More Examples

Cards can also be used to display data updates or fun facts in a eye catching way.

28

Comments

248

Downloads

© 2016 YourApp