mass media

All-in-one Marketing app

Tabs & pills

Tabs and pills styles.

Get Started

1

Basic tabs

Left aligned tabs

Use the this standard structure to display .simple-tabs. Tabs are left aligned by default. Note that there are 3 tabs sizes available. Simply add .is-small, .is-medium or .is-large to the .tabs container.

SHOW CODE

Center aligned tabs

Add the .is-centered class to the .tabs div to center the tabs.

SHOW CODE

Right aligned tabs

Add the .is-right class to the .tabs div to center the tabs.

SHOW CODE

With icons

Add a span with class .icon inside a tab link to add an icon before it.

SHOW CODE
2

Boxed tabs

Boxed tabs

Add a class the .is-boxed modifier to make the navigation tabs boxed.

SHOW CODE
3

Animated tabs

Animated tabs

Add the .animated-tabs class to the .navigation-tabs wrapper to add an animation to the transitions.

SHOW CODE

Translated tabs

Add the .translated-tabs class to the .navigation-tabs wrapper to add an animation to the transitions.

SHOW CODE
4

Full pills

Full pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

SHOW CODE

Full rounded pills

Add the .full-pills.rounded class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

SHOW CODE
5

Light pills

Outlined pills

Add the .outlined-pills class to the .navigation-tabs wrapper to setup navigation pills.

SHOW CODE

Outlined rounded pills

Add the .outlined-pills class to the .navigation-tabs wrapper to setup navigation pills.

SHOW CODE
6

In cards

Pills in Card

Primary header

Secondary header

Accent header

Tabs in Card

On the right side

7

Special pills

Square icon pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

SHOW CODE

Circle icon pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

SHOW CODE