Introduction Modules Flavors Customization Quick Reference  Github
Core Grid Navigation Input Control Table Card Tab Contextual Progress Utility

Card

The card module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


Quick start

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


<meta name="viewport" content="width=device-width, initial-scale=1">

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.