How to read it
Every section is a group of elements. The small heading names the element; below it a sentence or two says what it is for and where you find it: in the block menu opened with / or the + button in the margin (Style, Insert), on the toolbar, or in the bubble menu that pops up when you select text.
Embeds store only a reference — which gallery, which video, which form. On the visitor's page BOX loads the target when the page is rendered, so a renamed or moved item is always up to date here too.
Narration
The "Listen" button below the lead image starts the article's narration: the visitor can listen instead of reading. In the admin it is the article's "Narration (AI audio)" field: the "AI narration" action makes it from the article's text, or you pick an audio file from the Media Drive; here a generated sample stands in its place. The header shows the reading time too, and the "Why it matters" box stands below the buttons, before the body — both are fields of the article itself.
Text and formatting
Headings
An article's headings structure the text on three levels: the sections are level two, these small headings level three.
A level-four heading
Level four structures a sub-section further; you rarely need it.
Alignment
A left-aligned paragraph: the default, use it for most text.
A centred paragraph: for short, highlighted sentences.
A right-aligned paragraph: for a signature, for example.
A justified paragraph: the lines are straight on both edges and the spaces stretch. It looks good in longer text, so this sentence is deliberately longer than the others to make the effect visible.
Emphasis in the text
The bubble menu puts emphasis on the selected text (subscript and superscript come from Ctrl+, and Ctrl+., the highlighter from the "Colors" button): bold, italic, underlined, struck through, inline code, subscript (H2O), superscript (m2), highlighter.
Colours
The "Colors" button sets the colour of the text and of the highlighter; use them sparingly: a coloured highlighter, coloured text.
Line break
Shift + Enter starts a new line in the same paragraph, for example in an address:
BOX Demo
1 Sample Street
Sampleton
Mention
Type @ and at least two letters in the editor to search for an article: its title goes into the text as a link, just like the internal links of the next section.
Links
A link can point to an outside address or to an element of BOX. An internal link stores its target, not its address: when the target moves, the link moves with it.
An outside address, in a new tab: the Big Buck Bunny page.
A content item: the anatomy of an article page — another article.
A menu item: About us — any page from the menu.
A Media Drive file: the sample notice (PDF) — to download.
Lists
Bullet list
A point in the list
A point with sub-points
The first sub-point
The second sub-point
The last point of the list
Numbered list
A numbered list can start from any number: typing "3. " at the start of a line begins it at three — like this one:
step three
step four
step five
To-do list
A ticked task
An open task
Quote, code, divider
Quote
The quote block stands apart from the rest of the text, indented. Use it for a longer quotation or to set off an important sentence.
Code block
The code block shows a snippet verbatim, in a monospaced font; you give its language right after the opening ``` (for example ```json):
{
"page": "Embed showcase",
"languages": ["hu", "en"]
}Divider
The horizontal rule separates two thoughts:
Table
A table can have a header row, a cell can span several columns, and the column widths can be set.
Element | Where to find it | Note |
|---|---|---|
Table | Insert › Table | You can add rows and columns. |
Merged cell | Select the cells, then "Merge cells". | |
Callouts
A callout comes in four tones — below in order: Info, Tip, Note and Warning. The tone shows in the box's colour and its icon, and screen readers announce it.
Info:
A neutral addition: background worth knowing.
Tip:
A handy trick that saves time.
Note:
A side detail that still matters.
Warning:
Something that leads to a mistake if you miss it.
The "Practical information" block is a callout with a label–value table; it starts with five rows (Where? When? How long? Restrooms, Accessibility) that you can rename and extend.
Info:
Practical information
Where? | 1 Sample Street, Sampleton |
|---|---|
When? | Every Saturday, 10:00 |
How long? | Two hours |
Restrooms | Yes, at the entrance |
Accessibility | Step-free access |
Layout
The "Columns" element puts content side by side; below 768 px it always stacks. A cell can hold paragraphs, headings, lists and callouts.
Two equal columns (50 / 50)
The text of a cell.
A list in a cell
second point
One third and two thirds (⅓ / ⅔)
Tip:
A callout in a cell.
The text of a cell.
A list in a cell
second point
Two thirds and one third (⅔ / ⅓)
The text of a cell.
A list in a cell
second point
Tip:
A callout in a cell.
Three columns
The text of a cell.
A list in a cell
second point
Tip:
A callout in a cell.
Embed width
The "Embed width" setting (Text rail or Wide) works on images, embeds, galleries, maps, quotes and callouts; if you leave it unset, the block stays in the text rail.
Text rail: the image is exactly as wide as the paragraphs.
Wide: the image fills the article's whole column; without a sidebar, the whole width of the page.
Info:
This callout is wide: the setting works on a callout too, not only on an image.
Images
With a caption of its own
With an alt text of its own
The alt text is for screen readers and search engines; on this image the article's own alt text overrides the Media Drive's.
A clickable image
This image leads to the About us page: an image link stores its target just like an internal link.
Interactive elements
Image comparison
Two images on top of each other: the slider shows the before and the after.
Drag the slider to compare the two images
Portrait quote
A quote with its speaker's portrait, name and role.
A good demo does not claim that something works — it shows it.
Mira LenzEditor
Route map
Stops on a map, in the light or the street style; the "Connect the stops" checkbox joins them with a dashed line. It is ticked in the first map and not in the second, where it marks single places.
Explore the stops
A route with three stops
Explore the stops
Three meeting points
Videos and audio
YouTube / Spotify embed: YouTube
The "YouTube / Spotify embed" element embeds a YouTube video from its pasted link, without a content item of its own; you set its caption here.
Video: from YouTube
The "Video" element embeds a video item. A video has its own page and a place in the Videos archive, so several articles can embed it.
Video: a Media Drive file
The same with a file uploaded to the Media Drive: the browser's own player plays it.
YouTube / Spotify embed: Spotify
The same element embeds Spotify's player too (a track, an album, a playlist, an artist, a show or an episode), compact or full size. The content and its cookies are Spotify's; here the trailer of Spotify's own podcast plays.
Gallery embed
The "Gallery" element embeds a gallery item. You choose from five looks; each opens the whole gallery in the viewer.
Single image
A single picture showing how many pictures the gallery has.
Two images
The first two pictures side by side.
Three images
The first three pictures in a row.
Grid
Every picture in a grid.
Carousel
The pictures in a swipeable strip.
Inline gallery
The "Inline gallery" lists pictures and videos right in the article, without a gallery item. The same five looks as the gallery embed; each item can have a title and a description of its own.
Single image
Two images
Three images
Grid
Carousel
Single image, with a video first
Embedded content
Event: Card
The "Embed" menu's "Article", "Event", "Place" and "Podcast episode" entries embed an item as a card: "Card" lies landscape across the text rail, "Compact" is narrow and upright. Here an event.
Events
One-day event at a venue
An event on one day, with a start and an end time, tied to a venue. The venue's card appears on the event page, and the event on the venue's page.
28 Oct, 10:00
Event: Compact
Events
One-day event at a venue
An event on one day, with a start and an end time, tied to a venue. The venue's card appears on the event page, and the event on the venue's page.
28 Oct, 10:00
Podcast episode: Card
A podcast episode the same way, with a play mark; the card leads to the episode's external address in a new tab — here the audio file itself.
Editing
A short episode with a theme tag(opens in a new tab)
A short episode with the "Editing" theme: try the theme and the "0–10 min" filters — in the admin: Content › Podcasts
8 min
Podcast episode: Compact
Editing
A short episode with a theme tag(opens in a new tab)
A short episode with the "Editing" theme: try the theme and the "0–10 min" filters — in the admin: Content › Podcasts
8 min
Product card
The shop's products appear with the shop's own card.
Vouchers
Gift voucher for one programme
See the checkout ask for no shipping and send a code after payment — in the admin: the product's "Product kind" field
HUF 6,990
Wide product card
The "Wide" variant gives a landscape card across the text rail: the text on the left, the image on the right; on a phone the image goes on top.
Gift voucher for one programme
See the checkout ask for no shipping and send a code after payment — in the admin: the product's "Product kind" field
VouchersHUF 6,990
View productProgramme card
Programmes come with the same embed, on the programme's own card.
Last minuteWorkshop
Getting started with the BOX editor
See the "Last minute" badge, the date's own price and the venue detail — in the admin: Webshop › Products › Dates
15 October 2026 at 9:00Sample Street, outside the library
HUF 8,000-30%HUF 5,600
InterestedWide programme card
The "Wide" variant gives a landscape card across the text rail: the text on the left, the image on the right; on a phone the image goes on top.
Last minuteGetting started with the BOX editor
See the "Last minute" badge, the date's own price and the venue detail — in the admin: Webshop › Products › Dates
15 October 2026 at 9:00Sample Street, outside the library
WorkshopHUF 8,000-30%HUF 5,600
InterestedForm and module
Form
The "Form" element embeds a real form you can send. This is the multi-step form: the second step comes only if you ask for the newsletter.
Module
The "Module" element puts an existing module into the article. This is a content recommendation module that appears only here: it recommends two places and a gallery.
Recommended content
Places
A venue with events
A fictional venue with an address and a map pin. Two events refer to it, so its page lists them.
Galleries
A gallery with mixed aspect ratios
Landscape, portrait and square pictures in one gallery. The grid keeps each picture's own proportions and aligns each row to one height.
Places
A venue as a map pin
A venue marked by a map pin only, such as a lookout or an outdoor meeting point.
Badges and buttons
A badge is a short label with or without an icon, in several colours:
A button is a highlighted link. It can point to an element of BOX or to an outside address, in a new tab:
What it leaves out
Two elements are missing on purpose: the product card's "feature" variant, which the editor does not offer, and the old image element, which lives on only in articles saved long ago. The Article and Place cards work like the event's. A new element joins this article first.
Mira Lenz
Editor
Mira Lenz is a fictional author of BOX Demo: her profile shows what a visitor sees about an author. A profile is public for whoever holds a role with the "Public contributor profile" permission.
