↓Skip to main content
  1. Snippits/
  2. Blowfish Exemplars/
  3. Blowfish Shortcodes/

timeline

<time datetime="2023-06-14 00:00:00 &#43;0000 UTC">June 14 2023</time><span class="px-2 text-primary-500">&middot;</span><time datetime="2024-02-20 16:00:25 -0600 CST">Updated: February 20 2024</time><span class="px-2 text-primary-500">&middot;</span><span>294 words</span><span class="px-2 text-primary-500">&middot;</span><span title="Reading time">2 mins</span>
Blowfish Shortcodes Timeline
Hoof & Paw
The ART in Heart
Hoof & Paw
Crystalini Partum a Canis Stercore
Table of Contents
blowfish shortcodes - This article is part of a series.
🐡 Shortcodes
Timeline creates a visual timeline of timelineItem elements

Timeline #

creates a visual timeline that can be used in different use-cases.
e.g.:

  • professional experience
  • a project’s achievements
  • etc.

a timeline relies on the timelineItem sub-shortcode to define each item within the timeline.

TimelineItem #

Each timelineItem has the following properties:

Parameter Description
icon the icon to be used in the timeline visuals.
header header for each entry
badge text to place within the top right badge
subheader entry’s subheader

Example: #

Code # 

{{< timeline >}}

{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
{{< /timelineItem >}}


{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" >}}
With html code
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
With other shortcodes
{{< gallery >}}
  <img src="/snippits/blowfish/shortcodes/gallery/01.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/02.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/03.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/04.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/05.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/06.jpg" class="grid-w33" />
  <img src="/snippits/blowfish/shortcodes/gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{< /timelineItem >}}

{{< /timeline >}}

Rendered #

  1. header

    badge test

    subheader

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.

  2. Another Awesome Header

    date - present

    Awesome Subheader

    With html code

    • Coffee
    • Tea
    • Milk

  3. Shortcodes

    AWESOME

    With other shortcodes

blowfish shortcodes - This article is part of a series.