About This Pattern
An accordion being paired with a heading. The accordion has three tabs.
Dependencies
The following items are required to use this pattern: Kadence Block Plugin
Use This Pattern
To use this pattern, click the clipboard icon on the top right of the box below to copy the code then paste it into the editor on your website. Do not highlight the text and copy it manually. You will need to update any images that may be in the pattern so your website is not cross linking with this page.
<!-- wp:kadence/rowlayout {"uniqueID":"386_2f0101-a0","columns":1,"colLayout":"equal","align":"full","firstColumnWidth":0,"secondColumnWidth":0,"thirdColumnWidth":0,"fourthColumnWidth":0,"fifthColumnWidth":0,"sixthColumnWidth":0,"inheritMaxWidth":true,"padding":["","","",""],"margin":["","","xxl",""],"kbVersion":2} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"386_36a788-24","kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column386_36a788-24"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"386_b98c64-b3","markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}]} -->
<h2 class="kt-adv-heading386_b98c64-b3 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading386_b98c64-b3">Heading</h2>
<!-- /wp:kadence/advancedheading -->
<!-- wp:kadence/tabs {"uniqueID":"386_47e8f8-18","contentBgColor":"var(\u002d\u002dglobal-palette9, #ffffff)","contentBorderStyles":[{"top":["palette3","",5],"right":["rgba(175,175,175,0)","",1],"bottom":["palette6","solid",1],"left":["rgba(175,175,175,0)","",1],"unit":"px"}],"innerPadding":["lg","sm","lg","sm"],"titleColor":"var(\u002d\u002dglobal-palette4, #2D3748)","titleColorHover":"palette1","titleColorActive":"#ffffff","titleBg":"","titleBgHover":"palette8","titleBgActive":"palette3","titleBorder":"","titleBorderHover":"","titleBorderActive":"rgba(222,226,230,0)","titleBorderWidth":[0,0,0,0],"titleBorderRadius":[0,0,0,0],"titlePadding":[8,20,8,20],"titleMargin":[0,0,0,0],"sizeType":"em","lineHeight":1.4,"lineType":"em","typography":"var( \u002d\u002dglobal-heading-font-family, inherit )","fontWeight":"600","startTab":1} -->
<div class="wp-block-kadence-tabs alignnone"><div class="kt-tabs-wrap kt-tabs-id386_47e8f8-18 kt-tabs-has-3-tabs kt-active-tab-1 kt-tabs-layout-tabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-inherit kt-tab-alignment-left "><ul class="kt-tabs-title-list"><li id="tab-tab1" class="kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active"><a href="#tab-tab1" data-tab="1" class="kt-tab-title kt-tab-title-1 "><span class="kt-title-text">Tab 1</span></a></li><li id="tab-tab2" class="kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab2" data-tab="2" class="kt-tab-title kt-tab-title-2 "><span class="kt-title-text">Tab 2</span></a></li><li id="tab-tab3" class="kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab3" data-tab="3" class="kt-tab-title kt-tab-title-3 "><span class="kt-title-text">Tab 3</span></a></li></ul><div class="kt-tabs-content-wrap"><!-- wp:kadence/tab {"uniqueID":"a83b41-ad"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-taba83b41-ad"><div class="kt-tab-inner-content-inner"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum sodales ipsum vel varius. Nunc rhoncus tellus sit amet diam vulputate scelerisque. Quisque iaculis, arcu at laoreet pharetra, libero lacus vulputate nunc, et aliquet ex tellus nec magna. Proin eget pretium sapien. Donec porttitor venenatis risus, quis sollicitudin risus porttitor quis. Maecenas vitae magna et nibh viverra feugiat. Aenean finibus accumsan ultrices. Nam a tellus iaculis, laoreet risus in, condimentum elit.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/tab -->
<!-- wp:kadence/tab {"id":2,"uniqueID":"d9d564-92"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tabd9d564-92"><div class="kt-tab-inner-content-inner"><!-- wp:paragraph -->
<p>Suspendisse egestas euismod dolor ut fermentum. Vestibulum mollis odio ut lectus iaculis lobortis. Fusce eget ante sit amet augue lobortis pellentesque ut vel risus. Nunc id nibh congue, dictum enim eget, viverra quam. Nunc porta sit amet nibh et aliquam. Pellentesque a magna scelerisque, finibus eros maximus, viverra purus. Nullam ornare tincidunt velit a fermentum. Morbi eget ligula nec nisi viverra tincidunt non eget neque. Praesent efficitur nisl dui, at convallis justo viverra nec. Etiam rutrum nunc sem, ultrices sagittis tortor interdum vitae. Cras eu dui tempus, dapibus ex ut, molestie dolor. Aliquam erat volutpat. Sed commodo lorem dui, vel sagittis nisi semper vel.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/tab -->
<!-- wp:kadence/tab {"id":3,"uniqueID":"74b767-2f"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-3 kt-inner-tab74b767-2f"><div class="kt-tab-inner-content-inner"><!-- wp:paragraph -->
<p>Morbi libero purus, tempus ac vestibulum vitae, volutpat eu libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Nulla varius id nunc eget pulvinar. Duis blandit dapibus nisl at feugiat. Quisque gravida sagittis mauris sit amet iaculis. Quisque facilisis ligula quis rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum lacus nisl. In vitae turpis efficitur nisi maximus scelerisque. Vivamus suscipit nulla semper mi malesuada tristique. Sed rutrum est sit amet sem rhoncus convallis sed eget enim. Aenean at enim ligula. Donec gravida dolor at turpis porta gravida. Ut vulputate felis in diam imperdiet ornare ac vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/tab --></div></div></div>
<!-- /wp:kadence/tabs --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->