UBC Tabs Block
Tabs, in essence, are like digital file folders, neatly organizing and presenting content to your audience. The UBC Tabs Block allows you to craft visually appealing and structured information, ensuring that your website visitors can effortlessly navigate through different sections of your content.
Whether you’re building an interactive product comparison chart, an informative FAQ page, or simply want to break down lengthy articles into easily digestible sections, the UBC Tabs Block is your go-to solution. With its user-friendly interface and customization options, you can tailor the appearance and behaviour of your tabs to match your website’s style and meet your specific content needs.
Table of Contents
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget justo sed leo interdum congue. Integer ac elit id felis suscipit consectetur. Nulla facilisi. Sed euismod euismod urna, a efficitur nunc feugiat eu. Vivamus tristique arcu id ligula dictum, eu posuere justo varius. Donec vel felis at metus congue facilisis. Proin auctor, mauris non euismod sodales, neque odio laoreet ligula, a ullamcorper odio nunc ac ex. Suspendisse potenti. Vivamus ut dapibus arcu, at convallis urna. Sed auctor urna quis varius feugiat. Sed sit amet risus eget urna vestibulum tincidunt. Integer bibendum, metus id tincidunt euismod, justo arcu sollicitudin nisi, ut consectetur justo enim vel ex.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Sed eget justo sed leo interdum congue.
- Integer ac elit id felis suscipit consectetur.
- Nulla facilisi.
- Sed euismod euismod urna, a efficitur nunc feugiat eu.
- Vivamus tristique arcu id ligula dictum, eu posuere justo varius.
Settings
Styles
The Tabs block comes with 3 pre-defined block styles, ‘Default’, ‘Green Gradient’, and ‘UBC Brand Style’. You can find them in the block settings, under ‘Styles’.
Default
Green Gradient
UBC Brand Style
Initial Tab Selected
You have the option to select which tab you would like to appear as visible when the page loads.
Mobile Friendly
Tabs will be transformed into accordions automatically on smaller screens.
Accessibility
The UBC Tabs Block, by default, conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively. Please ensure the content you put into your tabs also conforms with the same standards.
How to use the block on UBC CMS?
Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for UBC Tab Block and activate the plugin. proceed to the specific post or page you wish to edit. Click the + button located in the top-left corner or in the desired location on the page to add a block. Finally, search for UBC Tabs Block to insert it into your content.