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

Tab

The tab module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.

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

Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the tab module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.


Quick start

To use the tab module, simply include the link to the flavor you are using and start writing your HTML page as usual. 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.