Layout

Available in: documents. E-mails support cols, col, and box, but stack the columns vertically.

{{ page cols: 2 }}
## Where the returns came from {colspan: all}

The first column starts here and the text flows into the second.

Page columns and colspan

cols: 2 on a page flows its content through two equal text columns; cols: "2 1" gives a two-to-one layout. Content fills the columns in order with column-fill: auto, or is balanced with balance. {{ colbreak }} moves to the next column.

Set colspan: all on a heading or block to span the page columns. This example places the heading above both columns and a table below them.

{{ page cols: 2, column-fill: auto }}
## Markets {colspan: all}

The example equity index returned 5% this quarter, bringing its
year-to-date return to 10%.

{{ colbreak }}

The example bond index returned 2% this quarter and 4% year to date.

{{ table colspan: all, widths: 3 1 1 }}
| Index | Quarter | Year |
|---|--:|--:|
| Example Global Equity | +5% | +10% |
| Example Euro Bonds | +2% | +4% |
{{ /table }}

colbreak starts the bond commentary in the second column. The colspan: all option on the table returns to the full page width. It can also be used on paragraphs, KPI rows, images, visualisations, and boxes.

Cols and col containers

To place specific content in each column, wrap it in cols and col. Column widths are shares of the row (2/3, 1/3, 0.5, 40%) and must add up to at most one. A cols block without explicit col children flows its children into count equal columns.

keyword: count / gap / valign
options: count — 1 to 12 equal columns when no col blocks are given
options: gap — space between columns, in scale units
options: valign — top | center | bottom

{{ cols gap: 6 }}
{{ col width: 2/3 }}
### Commentary
The example portfolio returned 3% this quarter. Its year-to-date return
was 10%, including income.
{{ /col }}
{{ col width: 1/3 }}
{{ kpis cols: 1 }}
{{ kpi label: "Quarter", value: "+3%", sentiment: auto }}
{{ kpi label: "Year to date", value: "+10%", sentiment: auto }}
{{ /kpis }}
{{ /col }}
{{ /cols }}

The commentary uses two thirds of the row and the tiles use one third. cols: 1 keeps the tiles stacked within their column. Widths inside a column are relative to that column, so a visualisation at width: 100% fills its column.

Box

box groups content within a chosen width and position. It accepts nested blocks and the shared background, padding, and border options.

keyword: width / align / al / bg / p / keep
options: width — 1/2, 60%, 0.5, full, 240px
options: align — left | center | right (the box); al aligns its text

{{ box width: 2/3, align: center, bg: gray-100, p: a4, keep: together }}
## In brief
Revenue [[increased 12%]]{fg: green-600, st: b}; costs were flat.
{{ /box }}

Here width: 2/3 and align: center centre the box within the available width. p: a4 adds padding on all sides, and keep: together keeps the summary on one page when it fits.

Layout pages

For a fixed layout, give the page a type and define a CSS grid for that type in the document theme. Each block names its position with area.

This example places commentary and two figures on the left, with an allocation table on the right. autopaginate: false keeps the layout on one page; the content must fit within that page.

{{ page type: summary, section: "Portfolio summary", autopaginate: false }}

# Portfolio summary {area: title}

{{ para area: commentary }}
The example portfolio holds 40% in equities and 40% in fixed income.
Alternatives and cash account for the remaining 20%.
{{ /para }}

{{ kpis area: figures, cols: 2 }}
{{ kpi label: "Portfolio value", value: "EUR 8M" }}
{{ kpi label: "Quarter", value: "+3%", sentiment: auto }}
{{ /kpis }}

{{ table area: allocation, bars: 2, bars_max: 100, widths: 3 2 }}
| Asset class | Share |
|---|--:|
| Equity | 40% |
| Fixed income | 40% |
| Alternatives | 15% |
| Cash | 5% |
{{ /table }}

Add the following CSS to the document's config/custom/custom.css file and select custom as its theme. You can also include the CSS in an organisation theme. See Choosing a theme.

.novem--doc--page--type-summary .novem--doc--page-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title      title"
    "commentary allocation"
    "figures    allocation";
  gap: 24px;
}

The title spans both columns. The allocation area spans the two rows below it, while commentary and figures occupy separate areas on the left. Changing the grid changes their placement without changing the markdown.

Layout rules

• Name an area for every block on a layout page. A block without one is placed by the grid's auto-placement, and an area the grid does not declare makes the browser add an implicit track.
• type: is sanitised to lowercase letters and digits, so type: two-col becomes the class novem--doc--page--type-twocol. Avoid punctuation and leading digits in the name.
• A block in an area stretches to the area's height. An image or visualisation with height: fill fills it; fit: cover crops a picture to the box and fit: contain (the default) shows all of it.
• bleed: on an image, visualisation or box runs it out to the page edges it names, past the margins and the header and footer bands: right, top right bottom, x, y or all.
• Set autopaginate: false on a layout page whose content must not flow onto a continuation.
• section: on the page sets the running section label that a cascading header prints with $section; see Pages.

For CSS selectors and variables, see the Document theme reference.

Full-page visualisations

Set height: fill on a visualisation to use the available page height. The following example displays a public demo grid on a landscape page:

{{ page orientation: landscape }}
{{ vis ref: /u/novem_demo/g/nei_rgn_dash, width: 100%, height: fill }}

To include another document, use its reference in a vis block. Its content pages are inserted in sequence, so the result can occupy more than one page. For example, if you have a document named portfolio_appendix:

{{ page autopaginate: false }}
{{ vis ref: /d/portfolio_appendix, height: fill, title: false, caption: false }}

See Visualisations for reference formats and embedding options.