The building blocks of every interactive page.
Choose text, media, galleries, exercises, maps and other blocks for your page. Work with your AI or in the editor; Modula checks the structure and generates an HTML page you can save and reopen.
Every way to tell something.
Choose a block to explore its live demo.
Media
Interactive media Pro
Video and audio with a transcript that follows the playback, so listeners can read along and jump to any line, or to a chapter marked on the timeline.
Plays in an accessible player; the transcript highlights the line being spoken and each line is a link to that moment.
Loading the demo…
Media
PDF Pro
A PDF document, read right on the page.
Opens in a reader with zoom and page navigation, so learners never have to leave the page to consult a document.
Loading the demo…
Media
Spotlight Pro
An image that opens with a spotlight on the detail that matters, the rest dimmed.
The reader can drag the spotlight to explore the rest of the picture; the alternative text still describes the whole image.
Loading the demo…
Media
Hotspots Pro
Numbered points on an image, each opening a short text: the parts of a diagram, the details of a painting.
Every point is a button reachable with the keyboard, and screen readers get the texts as a list, in the order of the numbers.
Loading the demo…
Media
3D model Pro
A 3D model you can rotate and zoom, with numbered points on its parts that each open a short text.
Every point is a button reachable with the keyboard, and screen readers get the texts as a list, in the order of the numbers.
Loading the demo…
Media
Slideshow
A set of images shown one at a time, to tell a sequence.
Learners move through the pictures with the arrows, the keyboard or a swipe, and every image keeps its description for screen readers.
Layouts
- Grid
- Slideshow
Loading the demo…
Media
Comparison Pro
Two images of the same subject, with a slider to move between them.
Drag the handle, or use the keyboard, to show what changed: before and after, a diagram and the real thing.
Loading the demo…
Layout
Panels
Titled panels, opened one at a time, each holding text, images and galleries.
The reader opens the part they need, with the mouse or the keyboard: stacked as an accordion, whose titles are headings of the page so the outline stays readable for screen readers, or side by side as tabs.
Loading the demo…
Scrollytelling
Story scroller Pro
A story told by scrolling: a gallery or a video stays on screen while the steps are read, each step showing its image.
A list of the steps lets keyboard users jump to any of them, and each image is read with its step; readers who prefer reduced motion, and narrow screens, get the steps in a column, each image before its step.
Loading the demo…
Diagram
Diagram
A process drawn as labelled steps and decisions joined by arrows, or one idea branching into its subtopics as a mind map, laid out on their own.
Every diagram carries a text description that says in order what it shows: screen readers read it with the drawing, and every reader can open it below.
Loading the demo…
Text
Flashcards
Cards with a term on the front and its definition on the back, for active recall and glossaries.
Each card flips on click or keyboard, and can carry an image on either side.
Loading the demo…
Practice
Exercise
Questions the learner answers, checked on the page with feedback and tracked when the page is a SCORM package.
Many kinds of exercise, from multiple choice to crosswords. Answers are checked on the page; in a SCORM package, results are reported to the LMS.
Loading the demo…
Place
Map Pro
A map centred on a place, with an optional route or shapes.
Explore the map with zoom, markers, routes and areas. You can provide geographic data in GeoJSON format.
Loading the demo…
Time
Timeline Pro
Events placed in time, on an interactive timeline.
Show dates and periods, from millennia to seconds, including uncertain or approximate dates.
Loading the demo…
Technical
Code Pro
A code snippet with syntax highlighting.
Highlighted for the language it is written in, with a title and a short explanation.
Loading the demo…
Technical
Formula
A mathematical formula, written in LaTeX and rendered on the page.
Written in LaTeX and typeset right on the page.
Loading the demo…
Why blocks
Structured content, built for accessibility.
- Checked as they are written: what the AI sends is validated against the block’s contract, fixable mistakes are repaired and reported, the rest is refused.
- Rendered by Modula into HTML built for accessibility, from the same blocks we use in every project.
- Standalone: a page needs one script, which you keep next to it. Nothing calls Modula once the page is published.
- Editable by hand: where your assistant supports it, each block opens in its own editor, right in the chat.
Start building with blocks.
Connect Modula to your assistant and ask for a page: a lesson, a story, an assessment.