Timeline
Use the timeline shortcode to show items ordered on a vertical timelime.
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" >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| background | select | Border color of the connector dots, defaults to the body background color. If set, uses a subtle background color that is adaptive to the current color mode. Supported values: [primary, secondary, success, danger, warning, info, light, dark]. | ||
| class | string | Class attribute of the timeline’s container. | ||
| data | string | yes | Filename of the timeline input data. You can omit the file extension. The file should reside in the data folder. |
| Name | Type | Required | Default |
|---|---|---|---|
| background | select | ||
| Border color of the connector dots, defaults to the body background color. If set, uses a subtle background color that is adaptive to the current color mode. Supported values: [primary, secondary, success, danger, warning, info, light, dark]. | |||
| class | string | ||
| Class attribute of the timeline’s container. | |||
| data | string | yes | |
| Filename of the timeline input data. You can omit the file extension. The file should reside in the data folder. | |||
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.