Every block in one place
This page uses a top hero and all eight block types — a reference when composing pages in the CMS. Delete it in a real project.
Block: text
This is a richtext block — plain Markdown rendered into a prose section. It supports headings, bold, italic, links and lists:
- first item
- second item
- third item
Compact hero (content width)
The same hero block with "full width" off — it narrows to the content column and renders as an H2 (since it is not first on the page).
Block: cards with an image
Second photo
Every card in the row shares the same aspect ratio, whatever the file's dimensions.
Logo (vector)
An SVG is contained in the same frame — never cropped, never stretched. This is how a row of partner logos is built.
Block: facts (numbers)
300+
completed projects
12
years of experience
24/7
support — a fact need not be a number, and the icon is optional
Horizontal facts
150+
satisfied clients across the region
5
years of average partnership
Facts on a dark band
4
cities
98%
satisfied clients
48h
average response time
Block: news (blog)
Block: team
Ana Petrović
A short bio — replace it with a real description. Ana leads the team and makes sure every project meets the client’s expectations.
Marko Jovanović
This profile has no photo or socials — showing those fields are optional (a tinted placeholder is shown instead of an image). Replace the text with a real bio.
Block: container (grid-2, alt background)
Heading with a prefix
A container arranges nested blocks in a grid (grid-2 here); the “alt” background sets them off slightly.
Block: section (grouping) + separator
A section only groups (background + meaning) — it applies no layout. Vertical space comes from the separator block (an empty gap or a line). The text and quote re-theme to light automatically (contextual CSS vars).
A quote on a dark background — themed automatically.
Block: stack layout (single column)
Stack is a single-column container layout — it stacks blocks vertically with consistent spacing (the grid gutter). Layout — and therefore its gap — is always an explicit choice.
A separator here too adds an explicit line or gap — half, normal or double.
What clients say
Outstanding service from start to finish. Highly recommended!
Professional, fast, and exactly as we agreed.
Block: media (images + video)
Block: heading (centered)
A quote block highlights one strong sentence or testimonial.
Block: reusable block (include)
Written once, used everywhere
This band lives in the Blocks collection — edited in one place, then pulled into every page that uses it by an include block. Change it here and it changes everywhere.
Block: panels (accordion)
Does it work without JavaScript?
It does. The accordion is a native <details> element — it opens and closes without a single line of script, so it works while the page is still loading, and for a visitor whose script never arrived.
Does find-in-page (Ctrl+F) find text in a closed panel?
It does — and it opens the panel the text is in. That is why the accordion is the default: the content is really on the page, for a reader and for a crawler alike. Tabs cannot do this, because an inactive panel is hidden.
This one is set to “only one open”
Opening a panel here closes the others (exclusive). It is off by default — a panel that shuts itself under the reader’s finger has a way of surprising them.
Where does the coloured band come from?
Not from the panels — the panels sit inside a container, and the container carries the background. The same arrangement, with cards inside a tab, is shown below.
Block: panels (tabs)
What tabs are
Tabs are an upgrade of the same accordion, not a second block. In the HTML this is <details> here too; the script turns it into a tablist only once the block is wide enough. Narrow the window and it falls back to the accordion — which is what tabs had to become on a phone anyway.
A panel holds blocks
This is the deepest arrangement allowed: a coloured band → tabs → a container with a card grid. A panel is not a text field — it holds blocks, like any other page.
A card in a panel
The card is no different from a card on the page — same block, same styling.
A grid in a panel
The container picks the layout, as everywhere else: the panel only holds what you put in it.
Keyboard
The tablist is one stop in the tab order; left/right arrows move between tabs, Home and End jump to the ends. That is the WAI-ARIA tabs pattern — and the only reason tabs need a script at all.
A call-to-action block guides the visitor to the next step.
Get a quoteBlock: contact form
The same contact block as on the home page — send a message via WhatsApp.