{"id":239,"date":"2017-01-31T22:42:01","date_gmt":"2017-01-31T22:42:01","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=239"},"modified":"2017-01-31T22:42:01","modified_gmt":"2017-01-31T22:42:01","slug":"tabs","status":"publish","type":"page","link":"https:\/\/radialcircle.com\/index.php\/tabs\/","title":{"rendered":"Elements – Tabs"},"content":{"rendered":"

[vc_row full_width=\u201dstretch_row\u201d][vc_column]\n\t\t\t

\n\t\t\t\t

$\"\"$ <\/div>\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

[vc_column_text]<\/p>\n

Tabbed Content<\/h1>\n
These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n
\n
Explore all of Stack\u2019s modular elements
\nat the\u00a0Element Index Page \u2192<\/a>[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498220980801{padding-top: 0px !important;}\u201d ebor_docs=\u201d\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Text Tabs<\/h4>\n
The default tab style for Stack. Set the [data-content-align]<\/strong> to \u2018left\u2019 if you want the tabs to centered, but the tab content to be left aligned.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t
[vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column_text]<\/p>\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t
[vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column_text]<\/p>\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t
[vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column_text]<\/p>\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Icon & Text Tabs<\/h4>\n
The icon tab style for Stack achieved by placing an i element as the first child inside the .tab__title<\/strong>.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n
Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you\u2019ve got yourself one powerful value package.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n
Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
TommusRhodus is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it\u2019s no wonder over 40,000 customers enjoy using TommusRhodus themes.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Icon Tabs<\/h4>\n
The icon tab style for Stack achieved by placing an i element as the first child inside the .tab__title<\/strong>.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Code Quality<\/h5>\n
Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n
Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you\u2019ve got yourself one powerful value package.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Visual Design<\/h5>\n
Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n
Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Customer Experience<\/h5>\n
TommusRhodus is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it\u2019s no wonder over 40,000 customers enjoy using TommusRhodus themes.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Text Tabs<\/h4>\n
The default tab style for Stack. Set the [data-content-align]<\/strong> to \u2018left\u2019 if you want the tabs to centered, but the tab content to be left aligned.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n
Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you\u2019ve got yourself one powerful value package.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n
Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
TommusRhodus is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it\u2019s no wonder over 40,000 customers enjoy using TommusRhodus themes.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Icon & Text Tabs<\/h4>\n
The icon tab style for Stack achieved by placing an i element as the first child inside the .tab__title<\/strong>.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n
Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you\u2019ve got yourself one powerful value package.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n
Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
TommusRhodus is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it\u2019s no wonder over 40,000 customers enjoy using TommusRhodus themes.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Icon Tabs<\/h4>\n
The icon tab style for Stack achieved by placing an i element as the first child inside the .tab__title<\/strong>.<\/p>\n
To set the default active tab, put the class .active<\/strong> on the relevant tabs parent li element.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Code Quality<\/h5>\n
Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n
Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you\u2019ve got yourself one powerful value package.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Visual Design<\/h5>\n
Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n
Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t
\n\t\t\t
\n\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t
\n\t\t\t\t<\/p>\n
Customer Experience<\/h5>\n
TommusRhodus is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it\u2019s no wonder over 40,000 customers enjoy using TommusRhodus themes.<\/p>\n
\n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text]<\/p>\n
Looking for styled tabs sections?<\/h2>\n
View Tabs Sections<\/a><\/p>\n
or try the\u00a0 admin demo \u2197<\/a><\/p>\n
[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"
[vc_row full_width=\u201dstretch_row\u201d][vc_column][\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498220980801{padding-top: 0px !important;}\u201d ebor_docs=\u201d\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom:…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":"","footnotes":""},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8yNrc-3R","_links":{"self":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/239"}],"collection":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":0,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/239\/revisions"}],"wp:attachment":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/media?parent=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}