[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″] [tab] [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.
[/tab] [tab] [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.
[/tab] [tab] [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] [/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″] [tab] [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.
[/tab] [tab] [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.
[/tab] [tab] [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] [/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]
