FREE SALESFORCE LWC COMPONENT

Timeline

Keep each event concise and order the timeline consistently so users can scan it quickly.

Component structure

COMPONENTwcsTimeline

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <ol class="timeline">
    <li><strong>Case created</strong><span>Today · 10:32</span></li>
    <li><strong>Assigned to support</strong><span>Today · 10:35</span></li>
  </ol>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsTimeline extends LightningElement {}

CSS

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid #d8dde6}.timeline li{padding:0 0 1rem 1rem;position:relative}.timeline li:before{content:"";position:absolute;left:-6px;top:3px;width:9px;height:9px;border-radius:50%;background:#0b5cab}.timeline strong,.timeline span{display:block}.timeline span{font-size:.75rem;color:#5f6b7a;margin-top:.2rem}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>