timeline

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:

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