Card

Cards are flexible and extensible content containers. They include options for headers and footers, images, a wide variety of content, different background colors, and powerful display options. They can be used to give any information for the user, for eg. in Products page of an ecommerce website.

Vertical Card

Vertical Cards are Basic Cards which may contain product image, product name, product details, some buttons and icons. You can use card-container for card layout, and for other components, use card-image, card-author, card-content , etc. as shown below.

Horizontal Card

Horizontal Cards are similar to Vertical cards, but with alignment will be horizontal instead of vertical, which means that the image will be on one side and the content will be on the other side, as shown below.

Card With Badge

Cards With Badges are similar to basic cards, but with badges added to them. You can use the classes, as shown below.

Card with Dismiss

Cards With Dismiss are similar to basic cards, but with dismiss button added to them at the top right corner, as shown below.

Card with Text Overlay

Cards With Text Overlay are similar to basic cards, but with a message / text overlaying on the card body. You can use it for eg. in products website to show the information to user, as shown below.

Text only Cards

Text only Cards are similar to basic cards, but with only Text in them and no images, as shown below.

Card with Shadow

Cards With Shadow are similar to basic cards, but with box-shadow added to them, as shown below.