BLOCK CATALOGUE
Find the right block by starting with what you want the page to do.
Don't start with block names. Start with the job — opening, explanation, visuals, storytelling, trust or conversion — then explore the live examples that fit.
What are you trying to achieve?
Start with the outcome. Jump straight to the group most likely to give you the right starting point.
I need a strong opening →
A clear main message, a strong first impression and an obvious next step.
I need to explain something →
Headings, text, callout boxes, quotes and image-with-text layouts.
I want to show it visually →
Images, video, galleries, slideshows and interactive visuals.
I want to guide people through a story →
Cards, timelines, tabs and guided step-by-step layouts.
I need to build trust →
Numbers, testimonials, logos, reviews and the people behind the business.
I want visitors to take action →
Calls to action, contact forms, pricing, deadlines and downloads.
Hero blocks
The first impression of the page: your main message, the visual direction and the next step.
Hero · centred →
A clean, focused opening with a strong headline and CTA. Best when the message itself should carry the attention.
Hero · split →
Copy on one side, a strong image on the other. Useful when you want to show the product, person or outcome alongside the main promise.
Hero · full image →
Place the main message over a large background image. A strong fit for locations, products and visually distinctive brands.
Hero · video →
A headline and CTA over a moving background. Strong when the process, place or experience is easier to show than explain.
Text and editorial content
The core text elements, from a simple heading to a story built around an image.
Title →
For page headings, section headings and subheadings. Helps create a clear hierarchy and a page that is easy to scan.
Rich text →
For formatted paragraphs, lists, subheadings and longer explanations.
Callout box →
An important rule, warning or key line in four styles: as a note, on a card, as a large statement or on a coloured panel.
Quote →
Give a genuine quote or key statement more weight with supporting copy: beside it, centred or on a card.
Image with text →
Pair an image with formatted copy in an editorial layout for introductions, stories or detailed explanations.
Statement →
One or two large sentences that draw themselves as visitors scroll: word by word, with a highlighter stroke or in sliding lines.
Scrolling ticker →
Short words and phrases in a continuously running band that visitors can pause — for services, topics or mood.
Images and media
When words are not enough, show the thing with an image, video or interactive visual.
Image →
A standalone image with more visual weight and an optional caption.
Video →
A YouTube or Vimeo video as a player or an image teaser, for a product demo, interview or tutorial.
Gallery →
Related images in a grid, a masonry layout or a horizontal scroll, with zoom.
Slideshow →
Several images or short messages in one space, one at a time: five layouts — classic, split, hero, magazine, cards — and six transitions.
Before / After →
Compare two aligned images with a draggable slider. Useful for transformations and other genuine visual changes.
Image with hotspots →
Clickable explanatory points on the details of an image, in four layouts: cards, a list, a zooming tour or labels on the image.
Image pair →
Two overlapping photos with a soft shadow: overlapped, tilted or stepped — beside text, for example in an About section.
Photo pile →
Polaroid-style photos in a deck, scattered on a table or fanned out, which visitors can flip through, push aside and enlarge.
Zooming image →
An image or short video that fills the screen as visitors scroll: it expands, opens like a round window or emerges from a giant word.
Layout and storytelling
Use these when the order and rhythm of the content matter as much as the content itself.
Cards →
Your own cards or existing pages and news in a grid, a paged row, with a featured card or as a mosaic.
Stacking cards →
Cards layer as visitors scroll, for connected steps or a short guided story, in four layouts.
Scrolling story →
Keep the visual in place while the steps of the story scroll alongside it.
Columns →
Arrange other blocks into two or three columns when you need a more custom layout.
Tabs →
Group related content under clickable tabs so visitors only see the view they need.
Timeline →
Milestones, project phases or company history in order: vertical, horizontal, along a winding path or in a zigzag.
Expanding panels →
Image panels that open up: an expanding row, flipping cards or a spotlight that follows the mouse.
Sideways scroller →
Steps, images or chapters in one row that moves sideways as visitors scroll: as cards, a filmstrip or chapter by chapter.
Hover list with images →
A large-type list whose rows reveal their image: following the cursor, in a split view or by expanding.
Stories →
Short picture stories in round bubbles or upright cards that open full screen and advance on their own.
Page structure and navigation
Smaller blocks that make a page easier to organise and move through.
Expandable sections →
Hide supporting detail inside expandable panels when everything does not need to be visible at once — as a list or as page cards.
Breadcrumb →
Show where the visitor is in the site hierarchy and give them an easy way back to higher levels.
Page header →
Turn the title and metadata of an article, news item or event into a consistent opening section.
Divider →
Add a visible visual boundary between two sections of content.
Spacer →
Add vertical breathing room between blocks when you simply need more space.
Link list →
External articles, press coverage and useful links in an organised list, with source and date.
Trust and proof
Numbers, opinions and people — for the moments when you need to support what you're claiming.
Key figures →
Real, verifiable numbers in ten layouts: counting up, in rings, as giant numbers, bars, a mosaic or over photos.
Partner logos →
Logos of real customers and partners, neatly arranged: in a grid, one row, running rows, a spotlight, as stamps or led by one big number.
Single testimonial →
Feature a real customer quote with a name, role and optional supporting media, in three layouts.
Testimonials →
Show many short customer reviews at once with names, photos and stars, in cards, a featured review, a rating summary, a moving wall or running rows.
Google reviews →
Show external Google reviews when keeping the source clear matters.
Team grid →
The people behind the business on cards, in round portraits, in rows, with one featured member, in a scrolling row or on flip cards.
Conversion and contact
Blocks that turn browsing into a clear next step.
Button →
One prominent button for one specific next action.
Call-to-action (CTA) banner →
A larger conversion section with a headline, supporting copy and up to two calls to action.
Contact form →
Capture enquiries with configurable fields, privacy consent and a success message — classic, on a card or in a split layout.
Newsletter sign-up →
A short signup point for your newsletter: an email address, an optional name, your own copy and a privacy note.
Form builder (custom forms) →
Your own form with conditional fields, step-by-step filling and file uploads — for quote requests, applications and needs assessments.
Appointment booking →
Online booking on your page: visitors choose a service, a team member and a free time, and the booking goes into your Demona calendar.
Opening hours →
Show weekly hours, holidays and an open-now status for shops, clinics and other places people visit in person.
Pricing table →
Compare the prices and key differences between real plans or packages.
Price list →
Prices of services and items in an easy-to-read list, with sections, short descriptions and highlights.
Countdown →
Count down to a genuine event or deadline: in boxes, rings, giant numerals, as a calendar page or in a floating pill.
File download →
Highlight a price list, catalogue, specification sheet or other genuinely downloadable document.
Structured content
Useful when you need to organise a lot of information into something visitors can scan quickly.
Features →
Present several equally important features or benefits in a short, consistent format.
FAQ →
Real customer questions in seven layouts — cards, two columns, a grid, large numbers, a chat or a featured question — with optional search.
Table →
Use rows and columns for comparable data, specifications or size charts; on mobile it can turn into cards.
Tags →
Add short, linkable labels for related topics and keywords.
Share buttons →
Let visitors share the current page to social platforms, by email or by copying the link.
Pros and cons →
Two short lists side by side: pros and cons, who it is for and who it is not for, in three layouts.
Embeds and advanced elements
For specialised content that depends on an external service or a more targeted custom solution.
Map embed →
Embed a map to help visitors find a physical location.
Social post →
Show a Facebook, Instagram, X or LinkedIn post directly on the page.
Custom code (HTML) →
For advanced markup or embeds that do not have a suitable native block.
Flipbook (Issuu) →
A catalogue, magazine or brochure in page-turning form: from an Issuu publication or your own PDF.
News and events
Dynamic content blocks for featuring one specific item or building lists that can update automatically.
Chosen news story →
Keep one specific, manually selected article prominently featured.
News list →
Build an automatic or curated list of articles using category, featured-status and ordering rules.
Chosen event →
Feature one specific event, including an event that has already taken place.
Event list →
Show upcoming, past or manually selected events in a dynamic list.
You don't need to browse every block before you start building. Your first website version can already start with a useful structure in place. This catalogue is most useful when you want to replace a specific section, fine-tune it or make a more deliberate layout choice.
START WITH THE CONTENT, NOT THE COMPONENT LIST
Tell us what kind of website you need — you can fine-tune the blocks later.
Create a first version, see how it works, then keep shaping it in the same editor.