Content & Structure Blocks

These blocks organize long content into scannable, navigable structures — collapsible sections, tabbed panels, tables of contents, step flows, and data tables.

Accordion

Collapsible panels for FAQs, feature details, and long-form content. Each panel holds any blocks; open and close panels directly in the editor to work on their content. Use the Accordion when you want animated, styled collapsible sections; use the FAQ block below when the content is questions and answers and you want search-engine schema.

FAQ

Questions and answers with FAQPage structured data for rich search results.

• Built on the native <details>/<summary> element — works with JavaScript disabled, on every device.
• Each question is its own FAQ Item; the answer area accepts any blocks. Items are managed and reordered in List View, where each row is named by its question.
• Open by default — toggle per item.
• Open the first question — on by default; the first answer is expanded when the page loads. Uncheck it to start with everything collapsed.
• One open at a time — an option on the parent block; opening one question closes the others (handled natively by the browser, no JavaScript).
• Always open — turns the accordion into a plain Q&A list: every answer is visible, the toggle icon is gone, and there is nothing to click. The schema is still generated.
• FAQ schema — enabled by default; the FAQPage JSON-LD is generated server-side from the questions and answers on the page, so it can never drift out of sync with the visible content. Developers can adjust it with the bloqra_faq_schema filter.
• Toggle icon (chevron or plus/minus), question and icon colors, item spacing via the native block-gap control.
• Styles: Default, Boxed, Separated, Minimal.

Tabs

Switchable tabbed sections for organizing content by topic.

• Horizontal or vertical tab lists, with an optional icon per tab from the 1,900+ icon library.
• On mobile, tabs automatically become an accordion so long tab lists never overflow.
• Full keyboard navigation and ARIA tabs semantics; a tab can be deep-linked via the block’s anchor.
• Manage tabs in List View; each panel holds any blocks.
• Styles: Line, Boxed.

Content Switcher

Toggle between two or more content sets — the classic use is monthly / yearly / lifetime pricing, but any before/after or plan-A/plan-B content works.

• Each panel is a free-form canvas for any blocks, including Pricing Tables.
• Per-panel badge (e.g. “Save 20%”) to highlight a deal on its toggle button.
• Toggle styles: pills, buttons, or underline.
• Keyboard accessible, and the markup stays readable without JavaScript.

Tabs or Content Switcher? Tabs organize content (documentation, product details); the Content Switcher is a marketing toggle with badges, built for pricing and comparisons.

Table of Contents

An automatically generated, linked table of contents built from the headings on the page.

• Generated server-side on every page view — it can never go stale when you edit headings.
• Heading anchors are added automatically; clicking an entry smooth-scrolls, with an offset option for sticky headers.
• Collapsible via the native <details> element; choose which heading levels to include.
• Title, colors, spacing, and typography are fully customizable.
• Styles: Default, Boxed, Outlined, Minimal.
• Developers can adjust which headings are included with the bloqra_toc_headings filter.

Steps

A numbered process flow for tutorials, recipes, onboarding, and how-tos.

• Steps number themselves automatically (1 / 01 / I / a numeral styles) — reorder freely, the numbers always stay correct. Any step can show an icon instead of its number.
• Vertical or horizontal orientation (horizontal collapses to vertical on small screens).
• Connector line: solid, dashed, dotted, or none, with width and color controls; marker size and colors in the native panels.
• Optional HowTo structured data (JSON-LD), generated server-side from the step titles and content — eligible for how-to rich results. Adjust with the bloqra_steps_howto_schema filter.
• Styles: Default, Outlined, Boxed, Minimal.

Timeline

A vertical timeline for company history, project milestones, roadmaps, and résumés.

• Each entry has a date label, an optional marker icon, and a free-form content area for any blocks.
• Line position: left, right, or center with alternating entries (collapses gracefully on small screens).
• Line style (solid/dashed/dotted), width, and colors; marker size and color; entry spacing via block gap.
• Entries are managed in List View, named by their date labels.
• Styles: Default, Outlined, Boxed, Minimal.

Alert

An info, success, warning, or error notice with a familiar accent-bar look.

• The type sets the accent color and a matching default icon (override the icon, or the accent color, freely).
• Optional title plus rich-text content.
• Optional dismiss button, with a “remember dismissal” option so a visitor who closes the alert won’t see it again on that device.
• Styles: Default, Solid, Outlined, Minimal.

Advanced Table

A data table visitors can sort and search, that stays usable on phones — everything the core Table block leaves out, edited exactly like the core Table.

• Click any column header to sort ascending/descending. Sorting is numeric-aware: “50,000” and “$4.90” sort as numbers, text sorts naturally.
• Optional search field filters rows as visitors type, with an accessible results count.
• Responsive mode: horizontal scroll (default) or stack, where each row becomes a labeled card on small screens.
• Header/footer sections, per-column alignment, header background color, caption.
• Styles: Default, Stripes, Bordered, Minimal.

Comparison Table

Compare plans, products, or services feature by feature — a faithful mirror of the core Table editing experience, with comparison superpowers.

• Per-cell check, cross, and dash marks alongside or instead of text, recolorable in the Color panel.
• Highlighted column with a badge (“Recommended”) — toggle it from the toolbar; the highlight follows the column if you insert or delete columns.
• First-column row headers for feature names.
• Sticky header row for long tables (with an offset control for fixed navbars) and a sticky first column on phones.
• Header and highlight colors, caption, per-column alignment; converts to and from the core Table block.
• Styles: Default, Stripes, Bordered, Minimal.