Insites Docs Web Components V2Data DisplayTimeline Item

Timeline Item

Last updated on July 09, 2025.

Element: <ins-timeline-item>

Creates a timeline item.

 

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.

 

Complete Example

This is a timeline content.

This is the default styling of a timeline content without actions.

This uses timeline item 'solid' attribute. This can use along with 'color' attribute as well.

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

Code Snippet

<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>
Loading State

This content won't show because timeline is 'loading'.

Code Snippet

<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

Code Snippet

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

This is a default timeline item using hex colors.

This is a solid timeline item using hex colors.

Code Snippet

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

 

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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.