Card

A card is a single contained unit. They can act as a single entry point to a more detailed information. Typically a card can contain a heading text, description, a photo, button and links. Use the .card class on a container and add elements inside it. Check out this page for various types of card layouts.

A card with an image, heading text, description and links. Add a shadow using .shadow class. Make the card corners rounded with .rounded class

Perfect for using on a social media app. It provides a .tag class which can be used to add custom tags or category for your cards.

Ecommerce Card with 2 buttons and a floated icon button. Add a badge to your cards with the .badge class. This badge can be hidden when not required using the .hidden class.

A generic Text Only Card, with an optional close button. Enhance its look by adding the utility class .border