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 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.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $tab-container-name | String | Class name for tab components' containers | 'tabs' |
| $tab-container-box-shadow | Box shadow | Box shadow for tab components' containers | 0 1px 3px rgba(0,0,0, 0.1) |
| $tab-border-style | Border | Border style for tab components | 1px solid #9e9e9e |
| $tab-border-radius | Border radius | Border radius for tab components | 2px |
| $tab-label-back-color | Color | Background color for tab components' labels (default) | #e0e0e0 |
| $tab-label-selected-back-color | Color | Background color for tab components' labels (selected) | #eeeeee |
| $tab-label-fore-color | Color | Text color for tab components' labels (default) | $fore-color |
| $tab-label-selected-fore-color | Color | Text color for tab components' labels (selected) | $fore-color |
| $tab-label-hover-opacity | Opaciy | Opacity for tab components' labels (hover) | 0.8 |
| $tab-label-padding | Padding | Padding for tab components' labels | 10px |
| $tab-label-height | Height | Height for tab components' labels | 26px |
| $tab-panel-back-color | Color | Background color for tab components' panels | #fafafa |
| $tab-panel-fore-color | Color | Text color for tab components' panels | $fore-color |
| $tab-panel-padding | Padding | Padding for tab components' panels | 8px |
| $tab-panel-height | Height | Height for tab components' panels | 400px |
| $tab-stacked-breakpoint | Breakpoint | Breakpoint for tabs components' mobile view | 767px |
| $tab-stacked-name | String | 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.