Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Timeline

Share via
Hinode
Link copied to clipboard

Use the timeline shortcode to show tems ordered on a vertical timelime.

On this page
 

  • Overview
  • Arguments
  • Data format

Overview  

Added in v0.15.3  

Use the timeline shortcode to show items ordered on a vertical timelime.

Product launch

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.

I18N support

May 6, 2023

Lorem ipsum dolor sit amet.

New feature

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.

Product launch

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.

I18N support

May 6, 2023

Lorem ipsum dolor sit amet.

New feature

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:

ArgumentRequiredDescription
dataYesRequired filename of the timeline input. See data format for the file requirements. You can omit the file extension. The file should reside in the data folder.
backgroundNoOptional 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.
classNoOptional class attribute of the timeline’s container.

Data format  

Define a file in the data folder that contains the timeline data. The format supports the following attributes:

AttributeRequiredDescription
titleYesRequired title of the timeline element.
iconYesRequired class and name of a Font Awesome icon to include. The icons use the icon shorthand notation.
colorNoOptional theme color of the timeline element, defaults to primary.
dateNoOptional date of the timeline element, placed below the title.
badgeNoOptional label of a pill badge placed next to the title.
urlNoOptional 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 abolute (e.g. starts with http).
contentNoOptional 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.
Last updated: August 5, 2023 • Add class argument (619009c)
On this page
  • Overview
  • Arguments
  • Data format
Timeline
Timeline
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard