Docs

Timeline

Posted on April 18, 2024  (Last modified on June 7, 2025) • 5 min read • 874 words
Share via

Use 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.

May 6, 2023

Lorem ipsum dolor sit amet.

February 4, 2023

Cupiditate ducimus officiis quod!

Beta release

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.

May 6, 2023

Lorem ipsum dolor sit amet.

February 4, 2023

Cupiditate ducimus officiis quod!

Beta release

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.

markdown
{{< 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.
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.

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.