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.
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":"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 -->