Docs
Timeline
Last modified on June 7, 2025 • 5 min read • 906 wordsUse the timeline shortcode to show items ordered on a vertical timelime.
Overview
Use the timeline shortcode to show items ordered on a vertical timelime.
July 1, 2023
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
November 30, 2022
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
July 1, 2023
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
November 30, 2022
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
{{< timeline data="timeline-example" background="dark" >}}Arguments
The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| background | background, string | Background style of the section. | ||
| class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
| data | string | yes | Path of the input data relative to the site’s data folder. Supported data formats include JSON, TOML, YAML, and XML. You can omit the file extension. |
|
| justify | select | start |
Justification of the child elements. Supported values: [start, end, center, between, around, evenly]. |
| Name | Type | Required | Default |
|---|---|---|---|
| background | background, string | ||
| Background style of the section. | |||
| class | string | ||
| Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
| data | string | yes | |
Path of the input data relative to the site’s data folder. Supported data formats include JSON, TOML, YAML, and XML. You can omit the file extension. |
|||
| justify | select | start |
|
Justification of the child elements. Supported values: [start, end, center, between, around, evenly]. |
|||
Background Type
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| backdrop | string | Background image with a mask to improve contrast. | ||
| color | select | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
||
| subtle | bool | Apply subtle theme colors. |
| Name | Type | Required | Default |
|---|---|---|---|
| backdrop | string | ||
| Background image with a mask to improve contrast. | |||
| color | select | ||
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
|||
| subtle | bool | ||
| Apply subtle theme colors. | |||
Heading Type
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| align | select | start |
Alignment of the headline, content, or icon. Supported values: [start, center, end]. |
|
| arrangement | select | above |
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first]. |
|
| content | string, template.HTML | Section content displayed below the title. | ||
| preheading | string | Preheading of the section heading. | ||
| size | int | 4 |
Display size of the headline. Supported values: [1 - 6]. |
|
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | ||
| width | int | 8 |
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12]. |
| Name | Type | Required | Default |
|---|---|---|---|
| align | select | start |
|
Alignment of the headline, content, or icon. Supported values: [start, center, end]. |
|||
| arrangement | select | above |
|
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first]. |
|||
| content | string, template.HTML | ||
| Section content displayed below the title. | |||
| preheading | string | ||
| Preheading of the section heading. | |||
| size | int | 4 |
|
Display size of the headline. Supported values: [1 - 6]. |
|||
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | ||
| Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | |||
| width | int | 8 |
|
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12]. |
|||
Data Format
Define a file in the data folder that contains the timeline data. The format supports the following attributes:
| Attribute | Required | Description |
|---|---|---|
| title | Yes | Required title of the timeline element. |
| icon | Yes | Required class and name of a Font Awesome icon to include. The icons use the Icon Shorthand Notation. |
| color | No | Optional
Theme Color of the timeline element, defaults to primary. |
| date | No | Optional date of the timeline element, placed below the title. |
| badge | No | Optional label of a Pill Badge placed next to the title. |
| url | No | Optional url of the timeline element, added as link to the title when set. The url is joined with the release attribute of the
Documentation Configuration, unless the url is absolute (e.g. starts with http). |
| content | No | Optional content of the timeline element, supports markdown. |
The following snippet defines a single timeline element in yml format.
- title: Product launch
icon: fas rocket
color: primary
date: 2023-07-03
badge: v0.15.3
url: https://github.com/gethinode/hinode/releases/tag/v0.15.3
content:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.