Content
Display tables, images, file trees, and other structured visual content in your docs.
Components for displaying structured data and media.
Tables
Row-based Tables
table {
row = [Name, Type, Default],
row = [title, String, Documentation],
row = [theme, Object, Default theme]
}| Name | Type | Default |
|---|---|---|
| title | String | Documentation |
| theme | Object | Default theme |
The first row becomes the table header. All subsequent rows are body rows.
CSV Tables
You can render tables from CSV data using the csv parameter. The easiest way is to load from a file with readfile:
table { csv = readfile { src = sample-data.csv } }| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Active |
| Carol | Manager | On Leave |
You can also pass CSV data inline. CSV parsing supports quoted fields with commas and escaped quotes.
This is useful for keeping data separate from documentation content, or for sharing data between pages.
Lists
Unordered lists:
list { First item, Second item, Third item }- First item
- Second item
- Third item
Ordered lists:
list { type = ordered, First, Second, Third }- First
- Second
- Third
Images
image { src = /logo.svg, alt = Tiramisu logo }Images support click-to-zoom. You can add an optional caption:
image { src = /logo.svg, alt = Tiramisu logo, caption = The Tiramisu logo }The caption appears as small text below the image.
Cards
Navigation cards for linking between pages:
cards {
card { title = Getting Started, description = Set up your project, href = /docs },
card { title = Configuration, description = Customize your site, href = /docs }
}Cards support optional icon and image parameters:
cards {
card { title = Quick Start, description = Get up and running, href = /docs, icon = rocket },
card { title = Gallery, description = Browse examples, href = /docs, image = /preview.png }
}
Icons use Iconify icon names (see Icons). Images display as a cover image above the card content.
File Trees
Display directory structures:
filetree {
folder { src,
folder { docs,
file { index.tiramisu },
file { guide.tiramisu }
},
folder { lib,
file { config.ts }
}
}
}