[heading size="h2" style="uk-module-title"]Tabs[/heading]

To create a set of tabs, use the [tab] shortcode. Uikit tabs fit nicely in responsive layouts by converting the tabs into a dropdown menu. The tabs also scale to fit its contents by adjusting the tab height automatically.

[line_break/] [heading size="h3" style="uk-module-title"]Horizontal tabs[/heading] [line_break/] [tab tab_content_id="tabs_example1"] [tab_link active]Tab 1[/tab_link] [tab_link]Tab 2[/tab_link] [tab_link]Tab 3[/tab_link] [/tab] [tab_content content_id="tabs_example1"]

[heading size="h3" style="uk-module-title"]This is the first tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[heading size="h3" style="uk-module-title"]This is the second tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[heading size="h3" style="uk-module-title"]This is the third tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[/tab_content] [line_break/] [badge style="note uk-margin-top"]markup[/badge] [code][tab tab_content_id="tabs_example1"] [tab_link active]Tab 1[/tab_link] [tab_link]Tab 2[/tab_link] [tab_link]Tab 3[/tab_link] [/tab] [tab_content content_id="tabs_example1"] [tab]Your content goes here[/tab] [tab]Your content goes here[/tab] [tab]Your content goes here[/tab] [/tab_content] [/code][line_break/] [heading size="h3" style="uk-module-title"]Vertical tabs[/heading]

Vertical tabs use a combination of [tab_grid], [column] and [tab] shortcodes. The [tab_grid] shortcode is used to define the tab container; the [column] shortcode is used to define the widths of the tabs and content; the [tab] shortcode creates the tab elements.

[line_break/] [tab_grid] [column size="2-10"] [tab_left tab_content_id="tabs_example2"] [tab_link active]Tab 1[/tab_link] [tab_link]Tab 2[/tab_link] [tab_link]Tab 3[/tab_link] [/tab_left] [/column] [column size="8-10"] [tab_content content_id="tabs_example2"]

[heading size="h3" style="uk-module-title"]This is the first tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[heading size="h3" style="uk-module-title"]This is the second tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[heading size="h3" style="uk-module-title"]This is the third tab[/heading]

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

[/tab_content] [/column] [/tab_grid] [line_break/] [badge style="note uk-margin-top"]markup[/badge] [code][tab_grid] [column size="2-10"] [tab_left tab_content_id="tabs_example1"] [tab_link active]Tab 1[/tab_link] [tab_link]Tab 2[/tab_link] [tab_link]Tab 3[/tab_link] [/tab_left] [/column] [column size="8-10"] [tab_content content_id="tabs_example1"] [tab]Your content goes here[/tab] [tab]Your content goes here[/tab] [tab]Your content goes here[/tab] [/tab_content] [/column] [/tab_grid] [/code]