# Example URL: https://pro.flexablock.com/example/ Published: 2026-07-08T10:15:14+00:00 Updated: 2026-08-04T08:19:27+00:00 Author: admin # The Gutenberg block library Every Gutenberg block in one place — each with a short description and a live example so you can see exactly what it does. [Get the plugin](https://wordpress.org/plugins/flexa-block/) 1. [Home](/)/ 2. Blocks ## On this page Add headings to the page to build the table of contents. Category ## Layout blocks Structure your page with flexible containers, grids and sliders. flexa/container ### Container A section wrapper with per-device flex layout, background, borders and spacing. Nest anything inside it. Item one Item two Item three flexa/grid ### Grid A CSS grid that arranges inner blocks into responsive columns and rows with track gaps. Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 flexa/slides ### Slider (Slides + Slide) A carousel of slides with autoplay, transitions, arrows and dots. Each Slide holds any blocks. #### Slide one Any blocks can live inside a slide. #### Slide two Autoplay, loop, fade and more. Category ## Content & media The building blocks for text, imagery and calls to action. flexa/heading ### Heading A rich heading with optional eyebrow, subheading, separator, gradient text and effects. Eyebrow label #### A stylish heading flexa/text ### Text A rich paragraph with per-device typography, colours, hover colour and an optional drop cap. This is a Text block. It supports per-device typography, solid or gradient colour, and a drop cap for editorial layouts like this one. flexa/button ### Button A call-to-action link with fill, outline or ghost variants, sizes, icons and hover states. [Primary](#) [Outline](#) [Small](#) flexa/image ### Image A media image with per-device width, aspect-ratio lock, hover motion, caption and lightbox. ![](https://pro.flexablock.com/wp-content/uploads/2026/07/guvo59-mushrooms-7505404_1920-1-1024x576.jpg) flexa/separator ### Separator A horizontal divider with per-device width, thickness, alignment and style. --- flexa/info-box ### Info Box An icon or image paired with a title, description and optional button — great for features. #### Fast by default CSS is generated per block and only loaded when needed. #### Easy to use Everything is customised visually in the editor. flexa/counter ### Counter A grid of stat counters that count up when scrolled into view. 44+ Blocks 15K Downloads 99% Happy users flexa/testimonial ### Testimonial A review card with star rating, quote and an author block (avatar, name, role). A great tool > Flexa made it effortless to build a polished page without touching a line of CSS. ![Emma Carter](https://pro.flexablock.com/wp-content/uploads/2026/07/user-1.png) Emma CarterProduct Designer flexa/icon ### Icon A single icon with shape, colour, size, link and hover states. flexa/icon-list ### Icon List A checklist of items, each with its own icon, link and hover colour. Free lifetime updates Works with any block theme No page builder lock-in Light and dark mode ready flexa/notice ### Notice An inline message in info, success, warning or error tone, optionally dismissible. **Saved** Your changes are live on the site. **Heads up** This block is dismissible if you want it to be. × flexa/star-rating ### Star Rating A star score with optional title and review schema for rich results. 4.5 out of 5 flexa/data-table ### Data Table A striped, hoverable table built from columns and rows in the editor. BlockCategorySinceContainerLayout1.0Pricing TableMarketing1.4Post GridDynamic1.5 flexa/team-member ### Team Member A profile card with photo, name, role, bio and social links. ![Emma Carter](https://pro.flexablock.com/wp-content/uploads/2026/07/user-1.png) ### Emma Carter Product Designer Designs the block library and keeps every panel consistent. flexa/lottie ### Lottie Animation Play a Lottie/dotLottie animation on load, on scroll or on hover. **Needs configuration** The example points at a remote .json animation. Upload your own Lottie file in the block sidebar to serve it locally. Category ## Interactive blocks Engaging, motion-rich blocks that respond to your visitors. flexa/tabs ### Tabs Organise content into a tab bar that collapses into an accordion on mobile. OverviewDetailsMore Overview Tabs keep related content tidy and scannable. Details Each tab can hold any plain text content you like. More Underline, pill or boxed styles are available. flexa/steps ### Steps A vertical timeline of process steps with numbered, icon or image markers. 1 Step oneDescribe the first stage of your process. 2 Step twoThen the next stage, and so on. 3 Step threeFinish strong. flexa/faq ### FAQ An expandable question-and-answer accordion with open-state icons and schema. What is the FAQ block? An accordion for questions and answers, with optional rich-result schema. Can I open one at a time? Yes — toggle close-others to keep just one panel open. flexa/countdown ### Countdown A live countdown to a target date with day/hour/minute/second units and labels. flexa/before-after ### Before / After A drag-to-reveal image comparison slider with labels and a handle. ![After](https://pro.flexablock.com/wp-content/uploads/2026/07/bg-001-a-1.jpg) ![Before](https://pro.flexablock.com/wp-content/uploads/2026/07/bg-001-gray-1.jpg) BeforeAfter flexa/images-gallery ### Images Gallery A grid, masonry or tiled gallery with hover motion, captions and a lightbox. ![Catania](https://pro.flexablock.com/wp-content/uploads/2026/07/ahmetyuksek-catania-10333720_1920-1-683x1024.jpg) Catania ![Northern lights](https://pro.flexablock.com/wp-content/uploads/2026/07/facusio-northern-7415567_1920-2-1024x576.jpg) Northern lights ![Coffee](https://pro.flexablock.com/wp-content/uploads/2026/07/husien_pro-coffee-10260378_1920-1-683x1024.jpg) Coffee ![Mushrooms](https://pro.flexablock.com/wp-content/uploads/2026/07/guvo59-mushrooms-7505404_1920-1-1024x576.jpg) Mushrooms ![Turtle](https://pro.flexablock.com/wp-content/uploads/2026/07/kanenori-green-sea-turtle-8199770_1920-1-683x1024.jpg) Turtle ![Quantum](https://pro.flexablock.com/wp-content/uploads/2026/07/facusio-quantum-7415566_1920-1-1024x576.jpg) Quantum flexa/video-popup ### Video Popup Play a YouTube, Vimeo or MP4 video in a modal lightbox from a thumbnail, button or link. ![Watch](https://pro.flexablock.com/wp-content/uploads/2026/07/facusio-quantum-7415566_1920-1.jpg) × flexa/modal ### Modal A dialog opened by a button, image or text trigger; holds any blocks inside. See what is inside × Dialog #### Inside the modal A modal holds any blocks you like. Close it with the X, the overlay or the Esc key. flexa/process-bar ### Progress Bar A line or circle progress meter that fills when it scrolls into view. PageSpeed score 98% Accessibility 95% flexa/timeline ### Timeline A vertical timeline of milestones with numbered, icon or image markers. 2024First releaseTwelve layout and content blocks shipped. 2025Dark mode everywhereEvery colour attribute gained a light/dark pair. 2026Dynamic blocksPost Grid, Taxonomy and feed blocks joined the library. Category ## Navigation & social Wayfinding blocks plus maps and social links. flexa/breadcrumb ### Breadcrumb A hierarchical trail, built automatically or by hand, with a chosen separator and schema. 1. [Home](#)/ 2. [Library](#)/ 3. Breadcrumb flexa/table-of-content ### Table of Contents An auto-built list of the page headings with jump links and smooth scroll. #### On this page Add headings to the page to build the table of contents. flexa/social-icon ### Social Icons A linked row of social network icons with official or custom colours and hover motion. flexa/social-share ### Social Share Share buttons that post the current page to Facebook, X, LinkedIn or Pinterest. flexa/google-map ### Google Map Embed a Google Map for any address or place, with zoom and per-device height. Category ## Dynamic content Blocks that pull live content from WordPress or an external feed. flexa/post-grid ### Post Grid A query-driven grid of posts with image, meta, excerpt, read more and pagination. 49 posts found [![The Flexa Block Pro Multi-Step Form block on step 2 of 4, showing the progress bar and Back / Next buttons](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-block-pro-multi-step-form-preview-1024x576.png)](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) admin·August 4, 2026 [The Multi-Step Form Block: One Long Form, Broken Into Short Steps](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) Split a long intake or booking form into short steps with a progress indicator,… [Read more](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) [![The Image Hotspot block: markers placed on a photograph, one of them open showing its title and description](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-pro-preview-image-hotspot-1024x576.png)](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) admin·August 4, 2026 [The Image Hotspot Block: Point At What Matters In A Picture](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) Put markers straight onto a photo, a diagram or a floor plan, and let… [Read more](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) [![Preview of the Flexa Block Pro Sticky Announcement Bar pinned above a page](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-block-pro-sticky-announcement-bar-preview-1024x576.png)](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) admin·August 4, 2026 [The Sticky Announcement Bar Block: One Message, Pinned Where Nobody Misses It](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) A full-width bar pinned to the top or bottom of the screen — with… [Read more](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) flexa/post-filter ### Post Filter (+ Search, Taxonomy, Reset) A real GET form that drives a Post Grid. Works without JavaScript; the view script upgrades it to an in-place update. Search CategoryAll categoriesConversionDesignPro BlocksShowcaseTutorials Tag AllContentElementsFormsInteractiveLayoutMarketingMediaPostsSocial [Reset](/example/?flexa-aeo=md) Filter 49 posts found [![The Flexa Block Pro Multi-Step Form block on step 2 of 4, showing the progress bar and Back / Next buttons](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-block-pro-multi-step-form-preview-1024x576.png)](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) admin·August 4, 2026 [The Multi-Step Form Block: One Long Form, Broken Into Short Steps](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) Split a long intake or booking form into short steps with a… [Read more](https://pro.flexablock.com/the-multi-step-form-block-one-long-form-broken-into-short-steps/) [![The Image Hotspot block: markers placed on a photograph, one of them open showing its title and description](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-pro-preview-image-hotspot-1024x576.png)](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) admin·August 4, 2026 [The Image Hotspot Block: Point At What Matters In A Picture](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) Put markers straight onto a photo, a diagram or a floor plan,… [Read more](https://pro.flexablock.com/the-image-hotspot-block-point-at-what-matters-in-a-picture/) [![Preview of the Flexa Block Pro Sticky Announcement Bar pinned above a page](https://pro.flexablock.com/wp-content/uploads/2026/08/flexa-block-pro-sticky-announcement-bar-preview-1024x576.png)](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) admin·August 4, 2026 [The Sticky Announcement Bar Block: One Message, Pinned Where Nobody Misses It](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) A full-width bar pinned to the top or bottom of the screen… [Read more](https://pro.flexablock.com/the-sticky-announcement-bar-block-one-message-pinned-where-nobody-misses-it/) flexa/taxonomy ### Taxonomy A list or grid of terms with post counts, linking to each archive. - [Conversion(12)](https://pro.flexablock.com/category/conversion/) - [Design(15)](https://pro.flexablock.com/category/design/) - [Pro Blocks(1)](https://pro.flexablock.com/category/pro-blocks/) - [Showcase(14)](https://pro.flexablock.com/category/showcase/) - [Tutorials(7)](https://pro.flexablock.com/category/tutorials/) flexa/rss RSS Feed Render any public RSS or Atom feed as a grid or list, cached for a set number of minutes. Add a feed URL to show entries. **Needs configuration** Paste a feed URL into the block sidebar to render live items. flexa/facebook-feed Facebook Feed Show recent posts from a Facebook Page, with reactions, shares and images. Add a Facebook Page access token to show posts. **Needs configuration** Add a Facebook Page ID here and a Page access token in the Flexa Blocks settings. flexa/instagram-feed Instagram Feed Show recent Instagram media in a square thumbnail grid with captions. Add an Instagram access token to show media. **Needs configuration** Add an Instagram access token in the Flexa Blocks settings to load media. Category ## Marketing & forms Hero banners, calls to action and a full newsletter form. flexa/banner ### Banner A promotional hero — heading, description and buttons over a colour, gradient or image. #### Grab attention A punchy line and a clear call to action. [Get started](#) flexa/cta ### CTA A call-to-action banner with a heading, description and primary/secondary buttons. #### Ready to get started? Nudge visitors to take the next step. [Start for free](#)[Learn more](#) flexa/pricing-table ### Pricing Table Plan cards with monthly/yearly toggle, feature list, badge and call to action. MonthlyYearly Starter $9/month$90/year - 1 project - All blocks - Community support [Choose Starter](#) PopularPro $19/month$190/year - 10 projects - All blocks - Priority support - Remove branding [Try Pro](#) Business $49/month$490/year - Unlimited projects - All blocks - Dedicated manager [Contact us](#) flexa/comparison-table ### Comparison Table Compare plans feature by feature, with check/cross icons and a spotlighted column. FreeFree trial[Get started](#) PopularProFor growing teams[Try Pro](#) BusinessFor enterprises[Contact us](#) Projects110UnlimitedAll blocksPriority supportRemove branding flexa/subscribe-form ### Subscribe Form A newsletter form built from field child blocks that emails the entry over AJAX. Email * Name Phone number What are you interested inSelect an option…Website designLanding pageE-commerce Website Preferred start date How did you hear about us? SearchSocial mediaA friend Message Attachment Send me product updates Consent * I agree to receive updates. Leave this field empty Subscribe --- Flexa Blocks #### That is the whole library Mix and match these blocks to build any page you can imagine. Five WooCommerce product blocks ship too — they render inside a single product template. [Download Flexa Blocks](#)