Troy Templeman

<p>Tabs Block Lite adds an accessible and responsive Tabs block to the block editor inserter that can be added to display horizontal list items that can be selected to show their associated sections of content.</p>
<p>Ideal for condensing longform or complex content. Also useful for reducing page scrolling.</p>
<p>Upgrade to Pro at <a href="https://troytempleman.com/wordpress/blocks/tabs-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/tabs-block/</a>.</p>
<h4>Features</h4>
<ul>
<li>Accessible</li>
<li>Responsive</li>
<li>Inserter button for adding tabs</li>
<li>Settings
<ul>
<li>Block alignment</li>
<li>Text alignment</li>
<li>Item justification</li>
</ul>
</li>
<li>Styles
<ul>
<li>Color
<ul>
<li>Text</li>
<li>Background</li>
<li>Link</li>
<li>Button text <strong>[Pro]</strong> </li>
<li>Button text hover <strong>[Pro]</strong> </li>
<li>Button text active <strong>[Pro]</strong> </li>
<li>Button background <strong>[Pro]</strong> </li>
<li>Button background hover <strong>[Pro]</strong> </li>
<li>Header background active <strong>[Pro]</strong> </li>
<li>Panel text <strong>[Pro]</strong> </li>
<li>Panel background <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Typography
<ul>
<li>Font family</li>
<li>Font size</li>
<li>Appearance</li>
<li>Line height</li>
<li>Letter spacing</li>
<li>Text decoration</li>
<li>Letter case</li>
</ul>
</li>
<li>Dimensions
<ul>
<li>Padding</li>
<li>Margin</li>
<li>Header padding <strong>[Pro]</strong> </li>
<li>Header margin <strong>[Pro]</strong> </li>
<li>Button padding <strong>[Pro]</strong> </li>
<li>Button margin <strong>[Pro]</strong> </li>
<li>Panel padding <strong>[Pro]</strong> </li>
<li>Panel margin <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Border <strong>[Pro]</strong>
<ul>
<li>Button border <strong>[Pro]</strong> </li>
<li>Button border hover <strong>[Pro]</strong> </li>
<li>Button border active <strong>[Pro]</strong> </li>
<li>Button border radius <strong>[Pro]</strong> </li>
<li>Panel border <strong>[Pro]</strong> </li>
<li>Panel border radius <strong>[Pro]</strong> </li>
</ul>
</li>
</ul>
</li>
<li>Variations <strong>[Pro]</strong>
<ul>
<li>Folder <strong>[Pro]</strong> </li>
<li>Pills <strong>[Pro]</strong> </li>
<li>Underline <strong>[Pro]</strong> </li>
</ul>
</li>
</ul>
<h4>Demo</h4>
<p><a href="https://troytempleman.com/wordpress/blocks/tabs-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/tabs-block/</a></p>
<h4>HTML</h4>
<p>Tabs Block Lite will output a Tabs block with the following HTML structure:</p>
<pre><code><div class="wp-block-tt-tabs wp-block-tt-tabs-1 wp-block-tt-tabs-folder">
    <ul class="wp-block-tt-tabs-header" role="tablist">
        <li class="wp-block-tt-tab-header" role="presentation">
            <button class="wp-block-tt-tab-header-button" id="wp-block-tt-tab-header-button-df856e31-e01a-46c3-bca3-be8041d3c416" aria-controls="wp-block-tt-tab-panel-df856e31-e01a-46c3-bca3-be8041d3c416" type="button" role="tab" aria-selected="true">
                <span class="wp-block-tt-tab-header-button-text">Tab</span>
            </button>
        </li>
    </ul>
    <div class="wp-block-tt-tab-panel wp-block-tt-tab-panel-1” id="wp-block-tt-tab-panel-df856e31-e01a-46c3-bca3-be8041d3c416" role="tabpanel" tabindex="0" aria-labelledby="wp-block-tt-tab-header-button-df856e31-e01a-46c3-bca3-be8041d3c416">
        <p>Panel</p>
    </div>
</div>
</code></pre>
<h3>Support</h3>
<p>If you need help with Tabs Block Lite, please submit a ticket on the <a href="https://wordpress.org/support/plugin/tabs-block-lite" rel="ugc">Support</a> forum.</p>
<h3>Donate</h3>
<p>If you like Tabs Block Lite and would like to support it’s future development, how about <a href="https://www.buymeacoffee.com/troytempleman" rel="nofollow ugc">buying me a coffee</a>?</p>
<h3>Contribute</h3>
<p>If you would like to contribute to the development of Tabs Block Lite, the repository is located on <a href="https://github.com/troytempleman/tabs-block-lite" rel="nofollow ugc">GitHub</a>.</p>
<h3>License</h3>
<p>Tabs Block Lite is released under the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License, version 2 (GPLv2)</a>.</p>
<h3>Requirements</h3>
<ul>
<li>WordPress 6.0 or greater</li>
<li>PHP version 7.4 or greater</li>
<li>MySQL version 5.7 or greater or MariaDB version 10.3 or greater.</li>
</ul>
<h3>Credits</h3>
<ul>
<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" rel="nofollow ugc">W3C Tabs Pattern</a></li>
<li><a href="https://css-tricks.com/tabs-its-complicated/" rel="nofollow ugc">Tabs: It’s Complicated™</a></li>
<li><a href="https://inclusive-components.design/tabbed-interfaces/" rel="nofollow ugc">Tabbed Interfaces</a></li>
<li><a href="https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/" rel="nofollow ugc">Building accessible user interface tabs in JavaScript</a></li>
<li><a href="https://medium.com/@naumanahmed19/wordpress-gutenberg-tabs-block-aee06970b128" rel="nofollow ugc">WordPress Gutenberg Tabs</a></li>
<li><a href="https://www.amberalter.com/2021/11/20/building-a-gutenberg-block-for-tabbed-content/" rel="nofollow ugc">Building a Gutenberg Block for Tabbed Content</a></li>
</ul>


Tabs Block Lite

A block that displays horizontal list items that can be selected to show their associated sections of content.

wpshopmart

<p>Colorbox panels is based on bootstrap framework, so box is responsive and friendly to any mobile devices. Colorbox is integrated with masonry/isotope effect. You can add multiple content box and icon box on multiple pages and post. There unlimited colour scheme and font style available for content.</p>
<p>This is not a popup box or lightbox plugin, this  is a content box or icon box plugin, which is display your content in column layout. You can add service page or, team page using colorbox plugin. There Widget option also available, just paste your shortcode [WPSM_COLORBOX id=xx] in text widget for display your content in widget area.</p>
<h3>Features Of Plugin</h3>
<ul>
<li>Responsive Design </li>
<li>Colorbox is responsive and friendly to any mobile devices</li>
<li>Limitless Colorbox/panels anywhere in the theme</li>
<li>Drag and Drop builder Api integrated.</li>
<li>Draggable box items for easy sorting</li>
<li>Use via short-codes</li>
<li>Awesome input field for box content</li>
<li>Unlimited colour option</li>
<li>Bootstrap framework based</li>
<li>Less for quick customization</li>
<li>Font Awesome Icon Support</li>
<li>Font Awesome Icon Picker Integrated</li>
<li>Two different styles Integrated</li>
<li>Hide All Colorbox on page load or display all </li>
<li>Five box layout available</li>
<li>Masonry/Isotope effect integrated</li>
<li>Box Same height js integrated </li>
<li>Gulp for instant workflow</li>
<li>Display iconbox</li>
<li>Display only description</li>
<li>Highly customized for User Experience</li>
<li>Slick Frontend and backend UI</li>
<li>Add and remove box item from backend.</li>
<li>Multiple Advanced Custom Field Available</li>
<li>All browser compatible</li>
</ul>
<h3>Colorbox Pro Features</h3>
<ul>
<li>Responsive Design </li>
<li>Colorbox is responsive and friendly to any mobile devices</li>
<li>Limitless Colorbox/panels anywhere in the theme</li>
<li>Drag and Drop builder Api integrated.</li>
<li>8 Types Of Loading Animation</li>
<li>External Link Option</li>
<li>Individual Box Color Settings</li>
<li>10 types of Box Layout</li>
<li>500+ Google Fonts Integrated</li>
<li>Box Border Customization </li>
<li>Box Shadow Generator</li>
<li>Box Radius Customization  </li>
<li>Use via short-codes</li>
<li>Awesome input field for box content</li>
<li>Unlimited colour option</li>
<li>Bootstrap framework based</li>
<li>Less for quick customization</li>
<li>Font Awesome Icon Support</li>
<li>Font Awesome Icon Picker Integrated</li>
<li>Two different styles Integrated</li>
<li>Hide All Colorbox on page load or display all </li>
<li>Five box layout available</li>
<li>Masonry/Isotope effect integrated</li>
<li>Box Same height js integrated </li>
<li>Gulp for instant workflow</li>
<li>Display iconbox</li>
<li>Display only description</li>
<li>Highly customized for User Experience</li>
<li>Slick Frontend and backend UI</li>
<li>Add and remove box item from backend.</li>
<li>Multiple Advanced Custom Field Available</li>
<li>All browser compatible</li>
</ul>
<h3>Check Demos</h3>
<ul>
<li><a href="http://demo.wpshopmart.com/colorbox-pro/" rel="nofollow ugc">Colorbox Pro – Live Demo</a></li>
<li><a href="https://wpshopmart.com/plugins/colorbox-pro/" rel="nofollow ugc">Upgrade To Colorbox Pro</a></li>
</ul>
<h4>Translators</h4>
<p>Please contribute to translate our plugin.  Contact at <code>wpshopmart(at)gmail(dot)com</code>.</p>


Colorbox Panels & Info Box

Colorbox panels is the most easiest drag & drop icon box and content box builder for WordPress. You can add unlimited panels with unlimited colour …

Tabs Block Lite vs Colorbox Panels & Info Box