A demo brochure that shows you exactly what you can configure from .md — every block presents itself. Copy, modify, done.
Three paragraph variants, plus inline formatting. All support **bold**, __underline__, _italic_, `code` and [links](https://latitude-app.com).
This is a lede block — use it for attention-grabbing introductions. The text is larger, darker and bolder than a normal paragraph. Maximum two sentences, ideally one.
A normal paragraph — the basic option for descriptive text. It supports underline, italic, bold and code snippets directly inline. If you add a title, you get a small hierarchy: section title (14pt) followed by body (10.5pt).
Set accent: true and the paragraph gets a vertical line in the primary color on the left. Good for quotes, key ideas, or sentences you want to highlight without using a colored callout.
Inline tokens are simple: ... for bold, ... for underline, _..._ for italic, \...\` for inline code, and text` for links. Raw HTML is blocked — anything you write is escaped before it reaches the page, so you can't accidentally break the layout.
02 / 26 Set `stil:` to `bullet`, `check`, `numerotat` or `plain`. All accept simple items or `bold + text` pairs with nested sub-items.
Used as the default. Good for short enumerations where order doesn't matter.
Ideal for benefits, capabilities, things you want checked off.
bold: with the short label and text: with the explanation. The checkmark appears automatically in a tinted circle. bold, underline, _italic_ and \code\`` in both the lead and the description. items:, you get a single line with no bold lead — same as bullet. 03 / 26 Numbered lists are ideal for workflows — and they support **nested sub-items** with a colored side bar.
titlu, subtitlu, descriere and culori — the basic brochure setup.content.config.ts. pagini: becomes one A4 page — eyebrow, title, subtitle and a list of blocks.gap: 11mm). /brosuri/<slug> to see the result live. 04 / 26 Four color variants: `soft`, `primary`, `accent`, `dark`. Each can hold a title, text, or a list with bold leads.
05 / 26 06 / 26 Block `tip: imagine` with `latime: full` — fills the entire content width. Ideal as the first element on a page, as a visual break between dense text sections. Also supports `caption`.
07 / 26 Same syntax with `latime: medie` — max 130mm and centered. Good for product screenshots that wouldn't look right stretched full-width.
08 / 26 Two directions: image on the right or on the left. The image has a colored accent behind it — depth effect without being loud.
Put the descriptive text on the left and a relevant screenshot on the right. Ideal when you want to explain a capability and also show how it looks in the product.
Reverse the order: image on the left, text on the right. Useful to alternate composition when you have multiple split blocks one after another. Avoids visual monotony.
09 / 26 **Default** variant — white background, colored top bar, icon on a pale background. Set `columns:` to 2, 3 or 4.
Generous space for descriptive text. Ideal for benefits that need a sentence or two of explanation.
Each card has a thin band in `culoare` — that's how you differentiate visually without changing the background.
Good compromise between density and readability.
Maximum 2 sentences per card at 3 columns.
Use icon names from the `Icon` component library.
10 / 26 **Pastel** variant — the card background takes a soft tone of the color. The icon sits on white with subtle shadow, no top band. Add `variant: pastel` to the `cards` block.
Generous space for descriptive text. Good when you have 2 or 4 items with short-to-medium paragraphs.
Cards have a comfortable width, the icon stands out clearly without dominating the composition.
Maximum density without becoming cluttered. Good for primary benefits.
Each card picks its own shade. The background is the pastel tone calculated automatically.
The tone stays pale enough that gray text remains comfortable to read.
Four per row, smaller padding.
One or two sentences, that's it. The rest is visual noise.
The classic trinity: icon, title, short description.
Use the same color set throughout the brochure.
11 / 26 **Glow** variant — white background with a diffuse color blob in the top-right corner and a softer tint in the bottom-left. Text is centered. Add `variant: glow` to the `cards` block.
On the `cards` block, add `variant: glow` and each card gets a soft color blob in the top-right corner and a paler one in the bottom-left.
Each card takes its tint from the `culoare:` field. Use different colors for variety, or the same color for a unified look.
Leave `iconita:` empty for a text-only card like this. Add `iconita: name` and it appears centered above the title on a white tile with a subtle shadow.
Unlike `pastel`, the `glow` variant centers the title and description. Good for cards with a short paragraph and an airy look.
The glow is calibrated to suggest the color without dominating. The rest of the card stays white, so the text is always readable.
Works the same on `columns: 1`, `2`, `3` or `4`. The next page shows a mix that combines all of them.
12 / 26 **Numbered** variant — white card with a subtle border, circular numbered badge in the top-left corner and icon + title on the same row. Numbers are generated automatically from item order. Add `variant: numbered` to the `cards` block.
The numbers 1, 2, 3, 4 come from the items' positions in the array — you don't have to write them manually.
In the numbered variant, `iconita:` sits on the same row as the title, not above it like default or pastel.
The numbered circle escapes the card border. Works well with white background and a subtle border.
Use numbered when you want to suggest order, but don't need a long description per step.
13 / 26 The same `variant: numbered` works at any `columns:` value. The badge and layout adapt automatically.
Compact, short labels.
Steps or capabilities across the width.
Next to the title, not above.
Number escapes the border.
More room for description — typical for steps in a workflow.
Numbers come from item position in the array — they don't reset between blocks (5, 6, 7…).
You can put a 4-col + 3-col + 1-col block on the same page, like this one.
For a final step or a central conclusion. Layout stays vertical (head + description) even on 1 column, to give the badge room.
14 / 26 Block `tip: tabel` with header, rows and three header styles: `default`, `primary`, `accent`. Enable `randAlternativ: true` for subtle zebra striping.
| Block | Type | Markdown support |
|---|---|---|
paragraf | Text | Yes |
lista | List | Yes |
callout | Box | Yes |
cards | Grid | In description only |
| Columns | Behavior | Recommended for |
|---|---|---|
columns: 1 | Horizontal layout | Items with long paragraphs |
columns: 2 | 2-column grid | 2 or 4 items |
columns: 3 | 3-column grid | Primary benefits |
columns: 4 | Compact grid | Short labels |
15 / 26 | Variant | Style |
|---|---|
default | Colored top bar, pale background |
pastel | Pastel background with icon on white |
numbered | White card with numbered badge |
glow | White card with corner glow |
16 / 26 Set `columns: 1` and the cards become **horizontal** — icon on the left, title and description on the right. Ideal when you have 4-6 items with long text and 3 columns become hard to read.
On `columns: 1` the card switches from vertical layout (icon-title-text stacked) to horizontal: icon on the left, title and description on the right. More readable for longer paragraphs.
If you omit `iconita:`, the card becomes text-only — title + description stacked, with no reserved space on the left. The grid adjusts automatically.
`columns: 1` combines with `variant: pastel`, `default` and `numbered`. For `default`, the colored bar moves from top-bar to left-bar.
The vertical gap between cards stays 4mm in 1-col. Internal padding grows slightly compared to 3-col, for a more relaxed look.
Useful when you have 4-6 benefits with rich text. On 3 columns the descriptions feel cramped — on 1 column each card has room to breathe.
17 / 26 On the same page you can stack multiple `cards` blocks with different `columns:` values. This is how you create visual rhythm: small items on top, richer content below.
Compact, ideal for short labels or capabilities.
One or two sentences, that's it.
The highest density possible across the width.
You can omit them for a cleaner look.
Balance between density and space for description. Typical for primary benefits.
Padding stays the same, but each card gets a more comfortable width.
Two or three sentences read well without becoming cluttered.
Room for a short-to-medium paragraph. Good when you want each item to carry more weight, or when you have exactly 2 or 4 items.
Cards have enough width for a complete descriptive sentence, without making the page look empty.
For a single high-impact item or as a section closer — the card takes the full width of the content area and the text stays centered.
18 / 26 Use the `tip: sectiune` block as an inline header — with optional `eyebrow`, `titlu` and `subtitlu`. Useful when two related topics fit together and you don't want a new page for each.
The same blocks (callout, lista, cards) work under each header.
gap: 11mm from .page-blocks naturally separates the sections. 19 / 26 The page opens with a normal page header (eyebrow + big title). Below it you put whatever fits — a paragraph, a callout, a short list.
Then, on the same page, you open a second section with a sectiune block and start dropping items. When they no longer fit, the rest go on the next page with a „(continued)" eyebrow.
On this page, the section header and 1-2 stacked cards fit. For longer descriptions, that's typical.
After this one, the A4 page is full — the remaining cards go on the next page with a continuation eyebrow.
20 / 26 Same section as the previous page, but without a page header — just the „(continued)" eyebrow signals the context.
The reader perceives the page as a natural continuation of section B, not as a new page with a different topic.
That's how you scale large sections without pages looking either empty or cluttered.
21 / 26 Use the exact name as the value for `iconita:` in cards, `coverBadges`, or any block that supports icons.
`iconita: "landmark"`
`iconita: "chart"`
`iconita: "chart-line"`
`iconita: "invoice"`
`iconita: "briefcase"`
`iconita: "document"`
`iconita: "clipboard"`
`iconita: "shield"`
`iconita: "shield-check"`
`iconita: "coins"`
`iconita: "schema"`
`iconita: "upload"`
`iconita: "download"`
22 / 26 `iconita: "cloud"`
`iconita: "bolt"`
`iconita: "refresh"`
`iconita: "grid"`
`iconita: "list"`
`iconita: "gear"`
`iconita: "plus-circle"`
`iconita: "target"`
23 / 26 `iconita: "check"`
`iconita: "check-circle"`
`iconita: "warning"`
`iconita: "pin"`
`iconita: "phone"`
`iconita: "email"`
`iconita: "globe"`
24 / 26 `iconita: "sparkle"`
`iconita: "star"`
`iconita: "diamond"`
`iconita: "heart"`
`iconita: "arrow-right"`
25 / 26