Components and Features

Discover the built-in features, custom components and panels, and advanced functionality in Web Accelerator for Storyblock—accessibility-ready and best-practices solid.
Comparison of two website designs: Top: A clean starter site with a hero panel, placeholder text, and navigation links like Membership and Events. Bottom: Xtreme Ag's page promoting 'The Granary' series, featuring a dark theme, green accents, and a call-to-action for webinars.

Build Any Page You Need.

Any Way You Want

Panels

Accordion Panel component for the Web Accelerator built for Storyblok, showcasing various states such as 'Expanded' with visible content, 'Hover' with highlighted interaction, and default collapsed headers. The design demonstrates clear hierarchy and interaction feedback for improved user experience.
Accordion

Customizable expandable text blocks.

 
Alert Bar component for the Web Accelerator built for Storyblok, displaying a concise announcement with a blue background. The bar includes placeholder text for a webinar promotion, with a 'Sign Up' call-to-action link, demonstrating clear and accessible messaging.
Alert Bar

Ribbon to call attention to notices, offers, and CTAs.

 
Image Text Panel component for the Web Accelerator built for Storyblok, showcasing a grid layout with two smaller cards featuring images, titles, descriptive text, and tertiary call-to-action links. The larger card highlights a prominent title, detailed description, and a primary call-to-action button, offering a flexible design for content presentation.
Columns Panel

Display related items or flow text side by side.

 
Sticky Column Table component for the Web Accelerator built for Storyblok, featuring a structured table layout with a sticky column on the left for static content, and multiple dynamic columns for additional information. The table includes rows with placeholder text and checkmark icons, providing a clear and accessible comparison format.
Comparison Matrix Panel

Highly customizable table to display mixed content elements.

 
Call to Action Panel component for the Web Accelerator built for Storyblok, featuring a bold headline, a short descriptive subtext, and a prominent primary button labeled 'Primary Large.' The clean and minimalistic design emphasizes user engagement and conversion.
CTA Panel

Full-width callout to call attention to directives.

 
Grid Panel component for the Web Accelerator built for Storyblok, displaying a four-column layout with individual cards. Each card includes an image placeholder, title, short description, and a tertiary call-to-action link, designed for presenting multiple pieces of content in a structured and visually consistent format.
Grid Panel

Arrange card, image, or text elements in a grid format.

 
Hero Panel component for the Web Accelerator built for Storyblok, featuring a split layout with a bold headline, descriptive subtext, and a prominent primary call-to-action button on the left. The right side showcases an image placeholder with a sleek, modern design, ideal for grabbing user attention and directing focus.
Hero Panel

Tall, visually engaging text and image panel.

 
Image Text Panel component for the Web Accelerator built for Storyblok, featuring a side-by-side layout with an image placeholder on the left and text content on the right. The text area includes a bold headline, a short description, and a prominent primary call-to-action button, designed to balance visuals and messaging effectively.
Image Panel

Full-width panel with a centered image.

 
Image-only Panel component for the Web Accelerator built for Storyblok, showcasing a clean and minimalistic design with a large image placeholder. This component emphasizes visual storytelling and is ideal for highlighting key visuals or background imagery.
Image Banner Panel

Full-width design element for foreground or background.

 
Image and Text Panel component for the Web Accelerator built for Storyblok, featuring a side-by-side layout with an image on the left and a detailed text block on the right. This component is ideal for combining visuals with in-depth content, maintaining a clean and professional design.
Image and Text Panel

Display image to left or right of text.

 
 
Carousel Panel component for the Web Accelerator built for Storyblok, featuring a horizontal scrollable layout with multiple icons displayed in a row. The design includes navigation arrows on either side for seamless interaction, ideal for showcasing logos, features, or visual highlights in a compact and interactive format.
Logo Carousel Panel

Customizable rotating logo display.

 
Logo grid
Logo Grid Panel

Customizable static logo display.

 
Tiered Logo Grid component for the Web Accelerator built for Storyblok, organized into three distinct sections labeled 'Tier One Header,' 'Tier Two Header,' and 'Tier Three Header.' Each tier contains evenly spaced logos, offering a structured and hierarchical design for showcasing partner or client categories.
Logo Grid, Tiered

Display grouped logo images with headers.

 
 
Personalization Panel

Create role-based variants for text blocks.

 
 
Schedule Panel

Dynamic, filterable display of conference or event agenda items.

 
Steps Panel component for the Web Accelerator built for Storyblok, showcasing sequentially numbered steps with clear headings, detailed descriptions, and tertiary call-to-action links. This layout is ideal for guiding users through a process, providing instructions, or outlining a series of actions in an intuitive format.
Steps Panel

Graphic and text detailing a step in a process.

 
Story Repeater component for the Web Accelerator built for Storyblok, designed to display a series of image-text cards with consistent formatting. Each card includes a headline, supporting text, and a tertiary call-to-action link, making it ideal for showcasing multiple related stories, features, or articles in a uniform layout.
Story Repeater

Showcase the most recent news and blog items.

 
 
Tabular data comparison panel for Web Accelerator in Storyblok, featuring a two-column layout with a bold heading, descriptive text, a primary call-to-action button, and a structured table with multiple columns and rows for data presentation.
Tabular Data Panel

Simple table for text and numbers.

 
 
Tabbed navigation panel for Web Accelerator in Storyblok, showcasing multiple tabs in different states, including default, selected, and hover, with a content section displaying descriptive text beneath the tabs.
Tabs Panel

Switch between content blocks in a single panel.

 
Testimonial panel component for Web Accelerator in Storyblok, displaying a quote in blue italic text with large quotation marks, accompanied by a placeholder profile image, name, title, and company information.
Testimonial Panel

Callout to showcase quotes and social proofs.

 
Text panel component for Web Accelerator on Storyblok, displaying structured text with bullet points and headings.
Text Panel

Format and display text content.

 
Text and widget panel component for Web Accelerator on Storyblok, featuring a text block and percentage-based statistics.
Text and Widget Panel

Embed a variety of widgets next to text.

 
Two-column text panel component for Web Accelerator on Storyblok, featuring a structured text block and a numbered list.
Two Column Text Panel

Display related items or flow text side by side.

 
Three-column text panel component for Web Accelerator on Storyblok, displaying multiple text cards with call-to-action links.
Three Column Text Panel

Display related text elements across three columns.

 
Video text panel component for Web Accelerator on Storyblok, featuring a video thumbnail with a play button on the left and a text block with a call-to-action button on the right.
Video and Text Panel

Embed videos next to text to play on page.

 

Widgets

Accordion Panel component for the Web Accelerator built for Storyblok, showcasing various states such as 'Expanded' with visible content, 'Hover' with highlighted interaction, and default collapsed headers. The design demonstrates clear hierarchy and interaction feedback for improved user experience.
Accordion Widget

Dynamic, expandable text item inside an accordion panel.

 
Button component for Web Accelerator on Storyblok, displaying different button styles including primary, secondary, and outlined variations in large sizes.
Button

Clarify where and how to take action.

 
Modal component for Web Accelerator on Storyblok, featuring an image text panel with a structured layout, including a left-aligned image and right-aligned text.
Modal Button

Enable pop-ups and lightboxes.

 
Columns widget component for Web Accelerator on Storyblok, displaying four image text cards with headlines, descriptions, and call-to-action links.
Columns Widget

Nest text, image, and interactive elements in a column.

 
Countdown timer component for Web Accelerator on Storyblok, displaying days, hours, and minutes remaining until an event.
Countdown Timer

Configurable timer to build urgency ahead of events.

 
Columns widget component for Web Accelerator on Storyblok, displaying four image text cards with headlines, descriptions, and call-to-action links.
Grid Widget

Nest a grid display inside a panel.

 
Icon and text widget component for Web Accelerator on Storyblok, displaying multiple text blocks with icons and links for additional information.
Icon and Text Widget

Display an icon to the left of decriptive text.

 
Icon card component for Web Accelerator on Storyblok, featuring a star icon, heading, description text, and a call-to-action link.
Icon Card

Display an icon in a card above text.

 
Image text card component for Web Accelerator on Storyblok, featuring an image, heading, description text, and a call-to-action link.
Image and Text Card

Display an image above descriptive text in a card.

 
Person card component for Web Accelerator on Storyblok, displaying an image, name, description text, and a call-to-action link.
Person Card

Display a person’s photo above text on a card.

 
Personalization widget component for Web Accelerator on Storyblok, displaying different variations of a step-based content panel with numbered steps and icon-based text blocks.
Personalization Widget

Specify custom content for defined variants.

 
Raw HTML component for Web Accelerator on Storyblok, displaying a code snippet with div elements styled using CSS properties such as flexbox, font styles, and alignment.
Raw HTML

Insert custom HTML into a panel.

 
Rich text editor component for Web Accelerator on Storyblok, displaying a text formatting toolbar with bold, italic, underline, headings, and other styling options.
Rich Text Widget

Nest a formattable rich text block inside a panel.

 
Statistics widget component for Web Accelerator on Storyblok, displaying a percentage value of 52% with supporting descriptive text below.
Statistics Widget

Display a graphically designed statistic in a panel or grid.

 

 
Steps Panel component for the Web Accelerator built for Storyblok, showcasing sequentially numbered steps with clear headings, detailed descriptions, and tertiary call-to-action links. This layout is ideal for guiding users through a process, providing instructions, or outlining a series of actions in an intuitive format.
Step Widget

Customize a step element in a panel.

 

 
Story feature widget component for Web Accelerator on Storyblok, displaying an image on the left with a text panel and call-to-action button on the right.
Story Feature Widget

Display featured content with descriptive CTA.

 
Tabular data comparison panel for Web Accelerator in Storyblok, featuring a two-column layout with a bold heading, descriptive text, a primary call-to-action button, and a structured table with multiple columns and rows for data presentation.
Tabular Data Widget

Nest a data table inside another panel.

 
Video text card component for Web Accelerator on Storyblok, featuring a video thumbnail with a play button, a title, description, and a call-to-action link.
Video and Text Card

Embed a playable video above text in a card.

 

Embeds

HTML5 video player component for Web Accelerator on Storyblok, featuring a play button overlay on a light abstract background with an HTML5 logo in the bottom left corner.
HTML5 Video

Enable video playback from a specified source.

 
YouTube video player component for Web Accelerator on Storyblok, featuring a play button overlay on a light abstract background with a YouTube logo in the bottom left corner.
YouTube Video

Add YouTube content directly to the page.

 
HubSpot form component for Web Accelerator on Storyblok, featuring input fields for name, email, dropdown selection, and additional fields for user data submission.
HubSpot Form

Integrate a HubSpot form in a panel.

 
Vimeo video player component for Web Accelerator on Storyblok, featuring a play button overlay on a light abstract background with a Vimeo logo in the bottom left corner.
Vimeo Video

Add Vimeo content directly to the page.

 
A Marketo lead capture form with input fields for name, email, dropdown selections, and text fields.
Marketo Form

Integrate a Marketo form in a panel.

 
A placeholder widget displaying the word 'iframe' in a centered box.
Iframe Embed

Display content from sources outside the page or site.

 
An image with a caption placed below, providing a short description of the image.
Image with Caption

Display an illustration with its associated description.

 
A placeholder widget displaying the word 'script' in a centered box, indicating script embed functionality.
Script

Add custom CSS, JS, and other embedded code.

 

Content Types

A web page layout for a starter site featuring a navigation bar at the top with multiple menu items, a login button, and a search icon. Below, a blue banner displays a webinar announcement with a sign-up link. The main section contains a large hero panel with a bold heading, descriptive text, and a primary call-to-action button. Below the hero, a column grid panel presents a heading, supporting text, and three image placeholders in a row.
Site Page

Basic page, customizable with any block type.

 
Web Accelerator blog news article component for Storyblok. The layout includes a top navigation bar, a large blog post title, an image placeholder, and article text. A sidebar on the right displays a list of topic filters and a call-to-action sign-up section.
Blog/News Article

Article content with customizable sidebar elements.

 
Web Accelerator blog news article component for Storyblok. The layout includes a top navigation bar, a large blog post title, an image placeholder, and article text. A sidebar on the right displays a list of topic filters and a call-to-action sign-up section.
Blog/News Article Topic

Utility page for customizing article categories.

 

 
Web Accelerator blog listing page component for Storyblok. The layout features a header with navigation, a main section with a large blog listing title, introductory text, and multiple blog post previews with images, headlines, and descriptions. A sidebar on the right contains topic filters and a call-to-action sign-up section.
Listing Page

Utility page to display current articles with filter sidebar.

 
Web Accelerator search results page component for Storyblok. Displays a search bar with filters for refining results, a list of search results with titles, descriptions, and breadcrumb navigation, and a results count indicating the number of matching entries.
Search Page

Empower site search and results filtering.

 
Web Accelerator 404 error page component for Storyblok. Displays a centered message with '404 | Not Found' in bold text, followed by 'We couldn't find this page' in a smaller font, indicating that the requested webpage is unavailable.
Not Found Page

Standalone announcement of missing page.

 

Content Types for Conference Sites

Web Accelerator conference homepage component for Storyblok. Features a hero panel with a bold heading, description, and primary button, along with a three-column text panel showcasing image text cards with descriptions and links. The navigation bar includes sections like Overview, Venue, Schedule, Speaker, and Sponsor, with a 'Become a Member' button.
Conference Homepage

Specialty microsite home for conference and event content.

 
Web Accelerator conference agenda track filter component for Storyblok. Displays a selection of track filters labeled Track One through Track Six, with active and hover states indicated by styling. Includes a 'Reset All' option for clearing selections.
Conference Agenda Track

Define and add a conference track.

 
Web Accelerator conference agenda item component for Storyblok. Displays a detailed session description with a track number filter, session title, and expandable content area for additional details. Includes a 'Show More' option for viewing extended content.
Conference Agenda Item

Build your conference agenda.

 
Web Accelerator conference schedule item component for Storyblok. Displays a detailed session schedule, including time, title, description, and track number filter. Below the session details, three related image text cards provide additional content or related sessions.
Conference Schedule Item

Add a conference schedule item.

 
Web Accelerator speaker profile component for Storyblok. Displays a speaker's image, name, title, and bio. Below, a speaker schedule section highlights upcoming sessions, including track number filter and session details.
Speaker

Create a dynamic speaker highlight.

Web Accelerator conference site header component for Storyblok. Displays site navigation with links to Overview, Venue, Schedule, Speaker, and Sponsor pages. Includes a 'Become a Member' button and a back link to the main starter site.
Conference Header

Customize the header for your conference microsite.

 
Web Accelerator conference site footer component for Storyblok. Displays a multi-column navigation menu with various links, two call-to-action buttons labeled 'Primary Large' and 'Outlined Large,' social media icons for LinkedIn, Instagram, Facebook, and YouTube, and legal links for Terms of Use, Privacy Policy, Cookie Notice, Cookie Settings, and Sitemap.
Conference Footer

Customize the footer for your conference microsite.

 

Globally Managed Content Types

Web Accelerator author bio component for Storyblok. Displays an author profile layout with a placeholder image on the left, the author's name in bold, multiple title placeholders, and a brief bio or description in paragraph format.
Author

Add an author profile.

 
Tiered Logo Grid component for the Web Accelerator built for Storyblok, organized into three distinct sections labeled 'Tier One Header,' 'Tier Two Header,' and 'Tier Three Header.' Each tier contains evenly spaced logos, offering a structured and hierarchical design for showcasing partner or client categories.
Partner (Sponsor)

Create a partner or sponsor profile.

 
Call to Action Panel component for the Web Accelerator built for Storyblok, featuring a bold headline, a short descriptive subtext, and a prominent primary button labeled 'Primary Large.' The clean and minimalistic design emphasizes user engagement and conversion.
Call to Action

Develop a set of reusable CTAs.

 
Logo grid
Logos

Create a reusable logo library.

 
Testimonial panel component for Web Accelerator in Storyblok, displaying a quote in blue italic text with large quotation marks, accompanied by a placeholder profile image, name, title, and company information.
Testimonial

Create a reusable testimonial library.

Alert Bar component for the Web Accelerator built for Storyblok, displaying a concise announcement with a blue background. The bar includes placeholder text for a webinar promotion, with a 'Sign Up' call-to-action link, demonstrating clear and accessible messaging.
Global Alert

Set up and launch an alert that displays sitewide.

 
Web Accelerator conference site header component for Storyblok. Displays site navigation with links to Overview, Venue, Schedule, Speaker, and Sponsor pages. Includes a 'Become a Member' button and a back link to the main starter site.
Header

Customize site header and navigation.

 
Web Accelerator conference site footer component for Storyblok. Displays a multi-column navigation menu with various links, two call-to-action buttons labeled 'Primary Large' and 'Outlined Large,' social media icons for LinkedIn, Instagram, Facebook, and YouTube, and legal links for Terms of Use, Privacy Policy, Cookie Notice, Cookie Settings, and Sitemap.
Footer

Customize footer and sitemap elements.

 

Our Storyblok Success Stories

American Society for Nondestructive Testing

Branding // Design // Development // Discovery and Roadmap // Web Accelerator for Storyblok // Web Content Strategy

Investments & Wealth Institute

Design // Development // Discovery and Roadmap // Integration // Web Accelerator for Storyblok // Web Content Strategy

Big I Illinois

Design // Development // Discovery and Roadmap // Integration // Web Accelerator for Storyblok // Web Content Strategy

Subscribe to Our Blog

Stay up to date on what BizStream is doing and keep in the loop on the latest in marketing & technology.