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.

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 customize the tab module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).

Tab styling

The tab module contains definitions for tab styling, using custom classes and structures.

VariableTypeDescriptionSample value
$tab-container-nameString Class name for tab components' containers'tabs'
$tab-container-box-shadowBox shadow Box shadow for tab components' containers0 1px 3px rgba(0,0,0, 0.1)
$tab-border-styleBorder Border style for tab components1px solid #9e9e9e
$tab-border-radiusBorder radius Border radius for tab components2px
$$tab-selected-border-colorBorder bottom color Border bottom color for tab components' selected label#0277bd
$tab-label-back-colorColor Background color for tab components' labels (default)#e0e0e0
$tab-label-selected-back-colorColor Background color for tab components' labels (selected)#eeeeee
$tab-label-fore-colorColor Text color for tab components' labels (default)$fore-color
$tab-label-selected-fore-colorColor Text color for tab components' labels (selected)$fore-color
$tab-label-hover-opacityOpaciy Opacity for tab components' labels (hover)0.8
$tab-label-paddingPadding Padding for tab components' labels10px
$tab-label-heightHeight Height for tab components' labels26px
$tab-panel-back-colorColor Background color for tab components' panels#fafafa
$tab-panel-fore-colorColor Text color for tab components' panels$fore-color
$tab-panel-paddingPadding Padding for tab components' panels8px
$tab-panel-heightHeight Height for tab components' panels400px
$tab-stacked-breakpointBreakpoint Breakpoint for tabs components' mobile view767px
$tab-stacked-nameString Class name for stacked tab components'stacked'

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.