About This Pattern
Accordion with four tabs. There is a block to set the background color of the accordion, and a heading on top of the accordion.
Use This Pattern
To use this pattern click the button below then paste the content directly into your website’s editor. Please note that you will need to update any placeholder images in the pattern. For some themes, colors and mobile breakpoints may also need adjustments.
<!-- wp:kadence/rowlayout {"uniqueID":"889_1f9c18-e0","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":"889_1be411-93","kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column889_1be411-93"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"889_8e9034-08","align":"left","color":"palette3","letterSpacingType":"em","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"}],"textTransform":"none","colorClass":"theme-palette3","textShadow":[{"enable":false,"color":"palette3","blur":0,"hOffset":1,"vOffset":1}],"fontHeight":[1.2,"",""],"fontHeightType":"em","maxWidth":[null,"",""],"maxWidthType":"%"} -->
<h2 class="kt-adv-heading889_8e9034-08 wp-block-kadence-advancedheading has-theme-palette-3-color has-text-color" data-kb-block="kb-adv-heading889_8e9034-08">Heading</h2>
<!-- /wp:kadence/advancedheading -->
<!-- wp:kadence/accordion {"uniqueID":"889_316c9c-65","paneCount":4,"startCollapsed":true,"linkPaneCollapse":false,"textColor":"palette4","linkColor":"palette1","linkHoverColor":"palette2","contentBgColor":"rgba(255,255,255,0)","contentBorderStyle":[{"top":["palette1","",0],"right":["palette1","",0],"bottom":["palette6","",1],"left":["palette1","",0],"unit":"px"}],"contentPadding":["sm","sm","lg","sm"],"contentMobilePadding":["","sm","","sm"],"titleStyles":[{"size":[17,"",""],"sizeType":"px","lineHeight":[24,"",""],"lineType":"px","letterSpacing":0,"family":"Fira Sans","google":true,"style":"normal","weight":"600","variant":"600","subset":"latin","loadGoogle":true,"padding":[20,10,20,0],"marginTop":0,"color":"palette4","background":"rgba(255,255,255,0)","border":["","","",""],"borderRadius":["","","",""],"borderWidth":["","","",""],"colorHover":"palette1","backgroundHover":"rgba(255,255,255,0)","borderHover":["","","",""],"colorActive":"","backgroundActive":"rgba(255,255,255,0)","borderActive":["","","",""],"textTransform":""}],"titleBorder":[{"top":["palette1","",""],"right":["palette1","",""],"bottom":["palette6","",1],"left":["palette1","",""],"unit":"px"}],"titleBorderHover":[{"top":["palette1","",""],"right":["palette1","",""],"bottom":["palette6","",1],"left":["palette1","",""],"unit":"px"}],"titleBorderActive":[{"top":["rgba(255,255,255,0)","",""],"right":["rgba(255,255,255,0)","",""],"bottom":["palette9","",0],"left":["rgba(255,255,255,0)","",""],"unit":"px"}],"titleBorderRadius":[0,0,0,0],"iconColor":{"standard":"","active":"","hover":"palette2"}} -->
<div class="wp-block-kadence-accordion alignnone"><div class="kt-accordion-wrap kt-accordion-id889_316c9c-65 kt-accordion-has-4-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right" style="max-width:none"><div class="kt-accordion-inner-wrap" data-allow-multiple-open="true" data-start-open="none"><!-- wp:kadence/pane {"uniqueID":"889_bcccc1-09"} -->
<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane889_bcccc1-09"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Accordion item 1</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel"><div class="kt-accordion-panel-inner"><!-- wp:paragraph {"className":"has\u002d\u002dfont-size"} -->
<p class="has--font-size">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></div>
<!-- /wp:kadence/pane -->
<!-- wp:kadence/pane {"id":2,"uniqueID":"889_60dfb1-32"} -->
<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane889_60dfb1-32"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Accordion item 2</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel"><div class="kt-accordion-panel-inner"><!-- wp:paragraph {"className":"has\u002d\u002dfont-size"} -->
<p class="has--font-size">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></div>
<!-- /wp:kadence/pane -->
<!-- wp:kadence/pane {"id":3,"uniqueID":"889_6d80d2-bd"} -->
<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane889_6d80d2-bd"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Accordion item 3</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel"><div class="kt-accordion-panel-inner"><!-- wp:paragraph {"className":"has\u002d\u002dfont-size"} -->
<p class="has--font-size">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></div>
<!-- /wp:kadence/pane -->
<!-- wp:kadence/pane {"id":4,"uniqueID":"889_92c69d-ed"} -->
<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane889_92c69d-ed"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Accordion item 4</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel"><div class="kt-accordion-panel-inner"><!-- wp:paragraph {"className":"has\u002d\u002dfont-size"} -->
<p class="has--font-size">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></div>
<!-- /wp:kadence/pane --></div></div></div>
<!-- /wp:kadence/accordion --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->