Search is currently unavailable.

Content components

Compose card grids, status timelines and Docs overview icons from reusable Markdown components.

On this page

Use devlab.* components directly in Markdown. The examples below combine card grids, timelines and overview icons. Arguments and defaults are listed in the component reference.

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.

Install

Pin a release tag and enable the theme in zola.toml.

Tera components

Every component with its parameters and live examples.

External

Codeberg

Source code, issues and release tags.

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/_index.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.

Use a timeline for stages with dates or status. For sequential instructions, use 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.

Choose authored or generated lists

Cards and timelines belong in the page body and work in Docs, Blog and generic layouts. Section templates generate lists from the content tree. Components render the items you write explicitly.