Block catalog
@revenexx/cover-theme ships around ninety block bundles. Before you write a block, check whether one already exists: extending a bundled block is usually less work than building and maintaining a new one, and it inherits the editor affordances already tuned for it.
Naming is snake_case throughout, and each bundle lives at app/components/blokkli/<bundle>/index.vue.
theme.json#blokkli.blocks[] in the layer is the authoritative list for your version, and the editor's block picker is the authoritative list for a given tenant — a block gated behind requiresCapability only appears where the capability is available.Standalone content blocks
The editorial building blocks. These are the ones an editor drops on any page.
| Bundle | What it renders |
|---|---|
hero | Full-width hero banner with headline, subline, and a call to action |
marketing_banner | Full-bleed promotional banner |
text | Rich text |
title | A standalone heading |
title_description | A heading with supporting copy |
image | A single image |
model | An interactive 3D model |
cta | Call-to-action button or link |
badge | Small inline label with an optional icon |
icon_label | An icon paired with a label |
back_link | A back-navigation link |
accordion | Accordion container |
accordion_item | One accordion entry |
form | Renders a form built in Cockpit — see Forms |
Layout containers
Containers hold other blocks. Each is a shell with a field.
| Bundle | What it renders |
|---|---|
content_section | A page section that hosts other blocks |
row | A horizontal row of columns |
column | One column within a row, width set by the shared colSpan option |
Product
Ten bundles, split between listing widgets and the product-detail shell's widgets.
| Bundle | What it renders |
|---|---|
product_grid | Products in a responsive grid |
product_swiper | Products in a horizontal carousel |
product_detail | The product-detail page shell |
product_identity | Name, brand, SKU |
product_gallery | Image and media gallery |
product_price | Price, resolved as a deferred offer |
product_pricing | Tiered and contract pricing |
product_stock | Availability |
product_specifications | The specification table |
product_description | Long description |
product_add_to_cart | Quantity input and add-to-cart action |
product_price and product_stock are worth understanding before you replace them: they read the batched offer cache rather than fetching per card, which is what keeps a grid of forty products from firing forty price requests. See Customize blocks.
Category and listing
| Bundle | What it renders |
|---|---|
category | The category page shell |
category_grid | Categories in a grid |
listing_header | Listing title and result count |
listing_toolbar | Sort, view mode, page size |
listing_filters | The filter panel |
listing_filters_bar | Filters as a horizontal bar |
listing_active_filters | The applied-filter chips |
listing_results | The result set itself |
listing_search_header | Header for a search-result listing |
search | The search-results surface — see Search |
Cart
A shell plus five widgets. The shell orchestrates recalculation; the widgets read shared state.
| Bundle | What it renders |
|---|---|
cart | The cart page shell |
cart_header | Cart title and top-level actions |
cart_messages | Validation and availability messages |
cart_positions | The line items |
cart_summary | Totals |
cart_recommendations | Cross-sell suggestions |
cart_requisitions | Requisition context for approval-driven buying |
Checkout and confirmation
| Bundle | What it renders |
|---|---|
checkout | The checkout shell |
checkout_address | Address step |
checkout_delivery | Delivery method step |
checkout_payment | Payment step |
checkout_notes | Order notes and references |
checkout_summary | Order summary and submit |
checkout_workflow | Approval-workflow step |
checkout_confirmation | The confirmation page shell |
confirmation_hero | Confirmation headline |
confirmation_recap | What was ordered |
confirmation_next_steps | What happens next |
confirmation_actions | Follow-up actions |
The checkout steps are schema-driven, so adding a customer-specific field is usually a schema change rather than a new block. See Catalog, cart and checkout.
Authentication
| Bundle | What it renders |
|---|---|
login_form | Sign in |
register_form | Registration |
forgot_password_form | Request a reset link |
reset_password_form | Set a new password |
These are buyer identity, not admin identity. See Authentication.
Account
The largest family — twenty-six bundles covering the whole self-service area, including the B2B governance surfaces that a B2C template wouldn't have.
| Area | Bundles |
|---|---|
| Shell and chrome | account, account_title |
| Dashboard | account_dashboard_greeting, account_dashboard_kpis, account_dashboard_quick_actions, account_dashboard_recent_orders, account_dashboard_budgets, account_dashboard_requisitions |
| Orders | account_orders_table, account_orders_detail |
| Order lists | account_order_list_table, account_order_list_detail |
| Saved carts | account_carts |
| Quick ordering | account_direct_order |
| Requisitions | account_requisitions_table, account_requisitions_detail |
| Approvals | account_approvals |
| Workflows | account_workflows_table, account_workflows_detail |
| Cost centers | account_cost_centers_table, account_cost_centers_detail |
| Organization | account_organization, account_team |
| Addresses | account_addresses |
| Profile | account_profile_form, account_password_form, account_preferences |
If you're scoping a B2B project, this table is worth reading closely. Cost centers, requisitions, approvals, budgets and team management are frequently written up as bespoke work; they already exist.
Presets
The reference theme also ships starting arrangements an editor can drop in as a unit:
| Preset | Blocks |
|---|---|
home | marketing_banner, content_section, product_swiper, text, product_grid |
landing | hero, text, image, cta |
faq | hero, accordion |
How to use this list
Extend before you replace. Most "we need a different product card" requirements are an option or a wrapper away, not a new bundle.
Reuse the widget vocabulary. If you add a widget to a shell — a compliance notice in the cart, a delivery-window picker in checkout — follow the shell's conventions: read shared state, don't orchestrate, and name it after its shell.
Only add a bundle for something genuinely new. Ninety blocks is already a lot for an editor to navigate. A ninety-first that duplicates an existing one makes the picker worse for everyone.
Next steps
- How a block works — writing your own.
- Shells and fields — how the cart, checkout, product and account shells are built.
- Registering blocks — adding yours to the manifest.
- Overriding the base layer — changing an inherited block without forking it.