Content components

DevLab exposes its content building blocks as global devlab.* components. They render inside Markdown, need no import and add no frontend build step. The Tera components reference lists every parameter; this guide covers the compositions worth a recipe.

Card grids

devlab.cards arranges devlab.card children in a responsive grid that collapses to one column on narrow screens. Each card can link somewhere, carry an icon and a status tag, and hold Markdown.

A linked card adds a trailing arrow, and an absolute HTTP(S) destination switches that arrow to the external-link marker:

{% <devlab.cards> %}
{% <devlab.card title="Tera components" icon="file" href="@/docs/reference/components.md"> %}
Every component with its parameters and live examples.
{% </devlab.card> %}
{% <devlab.card title="Codeberg" icon="codeberg" tag="External" href="https://codeberg.org/RiPetitor/devlab-theme"> %}
Source code, issues and release tags.
{% </devlab.card> %}
{% </devlab.cards> %}

Omit href for a standalone card. The grid fits as many 16rem columns as the content width allows, so keep titles short: they become the card headings, and a long title wraps inside its card rather than widening the row.

Status timelines

devlab.timeline presents a plan as ordered stages. Each devlab.timeline_item declares a title and a status, and can add a free-form date plus a custom label:

1. Done2026-08

   Bring-up

   UART, bootloader, kernel, Device Tree and internal storage.

2. In progress2026-09

   Hardware validation

   Network, USB, wireless, display, audio and sensors.

3. PlannedQ4 2026

   Preview

   Test image with known limitations and pinned component versions.

4. Release

   Supported

   Regression matrix on a release candidate before the stable release.

Supported statuses are done, active, planned and blocked; any other value falls back to planned. A stage carries its state in both the badge text and the marker colour, so the plan still reads without colour. label replaces the badge text when a project uses its own wording, and heading_level matches the stage headings to a surrounding outline other than the default h3.

Timelines suit bring-up notes, migration plans and release checklists. When the content is a short, linear set of instructions rather than a plan with dates, prefer Steps.

Docs overview icons

Docs overview cards read an optional icon from a section or page in front matter:

[extra]
icon = "folder"

The same icon set powers the icon argument on devlab.card. Omit the field to keep a plain text card.

Keep the structure portable

Cards and timelines are authored content, not layout configuration: they live in the page body and keep working when a page moves between Docs, Blog and the generic layouts. Reach for a section template when Zola should generate a list automatically, and for a component when you want to choose exactly what appears.

Where to go next

• Tera components — parameters, examples and the full icon list.
• Content layouts — generated pages and sections.
• Branding — the color tokens the components consume.