Timeline Item

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

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

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