Component library

Timeline Item component

Last updated 2 November 2026

Creates a timeline item.

Live demo

<ins-timeline 
  label="Sample Heading" 
  static-timeline 
  total-count="4">

    <!-- Each timeline entry is wrapped within <ins-timeline-item> -->

    <ins-timeline-item 
      title="This is a sample title" 
      color="yellow" 
      icon="icon-star" 
      datetime="2019-01-30 10:22:39 UTC, by: John Doe">

      <!-- Add 'slot="content"' to div to identify that it is the timeline content -->

      <div slot="content">

        <p>This is a timeline content.</p>

      </div>

      <!-- Add 'slot="actions"' to div to identify that it is the action content -->

      <div slot="actions">

        <ins-button label="" icon="icon-log-out" color="blue"></ins-button>

      </div>
    </ins-timeline-item>

    <!-- timeline item 2 -->
    <ins-timeline-item>
      <div slot="content">
        <p>This is the default styling of a timeline content without actions.</p>
      </div>
    </ins-timeline-item>

    <!-- timeline item 3 -->
    <ins-timeline-item solid>
      <div slot="content">
        <p>This uses timeline item 'solid' attribute. This can use along with 'color' attribute as well.</p>
      </div>
    </ins-timeline-item>

    <!-- timeline item 4 -->

    <ins-timeline-item datetime="6 days ago" inline="false" icon="icon-email-1" color="green" solid>

      <div slot="content">

        <p>This timeline item uses `inline` property `false`, thus the action options are positioned 'bottom-right'.</p>

      </div>

      <div slot="actions">

        <ins-button 
          size="small" 
          color="blue" 
          solid label="Accept">
        </ins-button>
 
     </div>

    </ins-timeline-item>

 </ins-timeline>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
icon	string	""	any	Specify CSS icon class used for the timeline item
color	string	""	blue, fushcia, green, grey, orange, pink, purple, red, turquoise, yellow	Specify CSS color class used for the timeline item
solid	boolean	false	true, false	Makes the timeline marker have background color
title	string	"1"	any	Specify a title / text shown on top of the timeline content
datetime	string	"1"	any	Specify datetime / text shown on bottom of the timeline content
inline	boolean	true	true, false	Makes the timeline content and action display 'inline-block'
hex-color	boolean	false	true, false	Enables hex color for the timeline item. Note: If hex-color is enabled, component will disregard the `color` and `solid` attributes.
font-hex-color	string	""	Hexadecimal colors	Specify font color using hex colors for the timeline item
border-hex-color	string	""	Hexadecimal colors	Specify border color using hex colors for the timeline item
background-hex-color	string	""	Hexadecimal colors	Specify background color using hex colors for the timeline item

Examples

Timeline Item - v2 Content

NOTE:

You can use this only when the ins-timeline attribute static-timeline is set to 'true'.
Wrap your HTML elements in div with atribute slot="content" and slot="action" respectively to specify where they will be displayed.

Loading State

<ins-timeline 
  label="Sample" 
  loading-screen 
  Static-timeline>

  <ins-timeline-item>

    <div slot="content">

      <p>This content won't show because timeline is 'loading'.</p>

    </div>

  </ins-timeline-item>

</ins-timeline>

Direct Value Set

<ins-timeline 
  id="directSetEl">
</ins-timeline>

<script>
  var sampleData = [{ color: "red", icon: "icon-star", content: "<h4>Hello World</h4> <p>Hello world</p>", actions: "<ins-button solid size=\"small\" label=\"Action\"></ins-button>", datetime: "1 month ago" }, { content: "sample content" }, { color: "blue", solid: true, content: "This is a timeline content." }];
  var timelineEl = document.getElementById('directSetEl');
      timelineEl.label = "Timeine data by script";
      timelineEl.timelineData = sampleData;
      timelineEl.totalCount = 3;
</script>

hexColor Attributes

Enable the use of hexademical colors for timeline item.
The hex-color attribute must be enabled to have a custom font-hex-color, border-hex-color and background-hex-color.

<ins-timeline
  label="Hex Color"
  static-timeline
  total-count="2">
  
    <ins-timeline-item
      heading="Default Red"
      hex-color
      font-hex-color="#FF0000"
      border-hex-color="#FF0000"
      icon="icon-star">
      <div slot="content">
        <p>This is a default timeline item using hex colors.</p>
      </div>
    </ins-timeline-item>

    <ins-timeline-item
      heading="Solid Blue"
      hex-color
      font-hex-color="#FFF"
      border-hex-color="#0000FF"
      background-hex-color="#0000FF"
      icon="icon-x">
      <div slot="content">
        <p>This is a solid timeline item using hex colors.</p>
      </div>
    </ins-timeline-item>
  
 </ins-timeline>