Content Blocks
Explore the 55 content block types available in Warpflow.
Overview
Warpflow ships with 55 content block types organized by category. Every block is:
- Fully responsive
- Themeable via CSS custom properties
- Available in canonical (CMS-agnostic) format
Accessibility
The blocks are built on semantic HTML and carry ARIA where it matters: landmark and figure/figcaption structure, a real heading element for each heading level, genuine button and checkbox controls, role="img" with a descriptive label on every SVG diagram, progressbar semantics on the stats blocks, aria-current on process steps, and live-region roles on callouts. Many of these are pinned by unit tests.
We have not completed a formal WCAG 2.1 AA audit, and we do not claim conformance. The
baseline above is a starting point, not a certification. Two things are worth knowing before you
ship: alt text is optional on image and gallery blocks and an omitted one renders as
alt="", which announces the image as decorative—always set it, especially on AI-generated
blocks. And the package ships no focus-visible styling, so if you need visible keyboard focus
you will need to supply it in your own theme. If you have a conformance obligation, audit the
blocks you actually use.
Categories
Content
Tables, code blocks, headings, blockquotes, callouts, contributor lists, to-do lists, and rich text. (8 blocks)
Stats and metrics
Number highlights, bar and circle stats, star ratings, and dot stats. (5 blocks)
Grids and cards
Card, icon and feature grids, solid / outline / sideline / top-circle boxes, and staggered cards. (8 blocks)
Process
Timelines, process steps, staircases, arrow steps, and box steps. (5 blocks)
Diagrams
Venn diagrams, arrow bars, connected circles, funnels, quadrant charts, cycles, pyramids, icebergs, versus comparisons, and rings. (10 blocks)
Media
Images, galleries, YouTube embeds, and video embeds. (4 blocks)
Embeds
Tweets, webpage embeds, and Google Drive embeds. (3 blocks)
Lists
Bullet lists, icon lists, arrow bullets, numbered lists, and checklists. (5 blocks)
Layouts
Heroes, feature sections, and split content. (3 blocks)
Quotes
Quote boxes and speech bubbles. (2 blocks)
Export
PDF documents and download buttons. (2 blocks)
Rendering
All blocks render through a single renderer component that handles layout, theming, and responsive behavior automatically.