Adding a Timeline in Squarespace with Left List - Right Vertical Line/Date

[tuanphan]

To add a Timeline in Squarespace with Left List - Right Vertical line/date, like this.

#1. Install Code

#1.1. First, you need to add a Team Section (choose Team > choose section with (i) icon)

Make sure you choose Simple List

Enable these options

#1.2. at Content Tab, add items like these

In each item, enter these

and these. Use # symbol to make text above it to heading style

#1.3. Hover on top right of section > Click Edit Section

Enter word: timelinev2

#1.4. Hover on page where you use Team Section > Click Gear icon

Click Advanced > Paste this code

<!-- @tuanphan - Timelinev2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
section[id*="timelinev2"] .tp-timeline{
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
  color:#111;
}
section[id*="timelinev2"] .tp-timeline__title{
  text-align:center;
  font-size:28px;
  line-height:1.2;
  margin:0 0 26px;
}
section[id*="timelinev2"] .tp-timeline__list{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:26px;
}
section[id*="timelinev2"] .tp-rail-global{
  position:absolute;
  top:var(--tp-rail-top,0px);
  height:var(--tp-rail-h,0px);
  width:2px;
  background:#e8e8e8;
  border-radius:999px;
  z-index:0;
  left:calc(100% - 240px + 32px - 1px);
}
section[id*="timelinev2"] .tp-rail-global:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:var(--tp-progress-h,0px);
  background:#ff3b2f;
  border-radius:999px;
}
section[id*="timelinev2"] .tp-item{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:22px;
  align-items:center;
}
section[id*="timelinev2"] .tp-card{
  background:#f5f5f5;
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr 44%;
  overflow:hidden;
}
section[id*="timelinev2"] .tp-card__body{
  padding:36px 34px;
}
section[id*="timelinev2"] .tp-card__h{
  font-size:26px;
  line-height:1.15;
  margin:0 0 12px;
  color:#111;
}
section[id*="timelinev2"] .tp-card__p{
  font-size:14px;
  line-height:1.7;
  margin:0 0 18px;
  color:#333;
  max-width:58ch;
}
section[id*="timelinev2"] .tp-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
section[id*="timelinev2"] .tp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  border:1px solid #ff3b2f;
  color:#ff3b2f;
  background:transparent;
}
section[id*="timelinev2"] .tp-card__media{
  position:relative;
}
section[id*="timelinev2"] .tp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
section[id*="timelinev2"] .tp-rail{
  position:relative;
  min-height:160px;
  z-index:1;
}
section[id*="timelinev2"] .tp-dot{
  position:absolute;
  left:32px;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  background:#cfcfcf;
  transition:background .25s ease;
}
section[id*="timelinev2"] .tp-dot.is-active{
  background:#ff3b2f;
}
section[id*="timelinev2"] .tp-meta{
  position:absolute;
  left:calc(32px + 9px + 18px);
  top:50%;
  transform:translateY(-50%);
  min-width:0;
  max-width:calc(240px - (32px + 9px + 18px + 8px));
}
section[id*="timelinev2"] .tp-date{
  font-size:10px;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ff3b2f;
  white-space:normal;
  overflow-wrap:anywhere;
}
section[id*="timelinev2"] .tp-date-main{
  display:inline;
  white-space:nowrap;
}
section[id*="timelinev2"] .tp-date-year{
  display:inline;
  white-space:nowrap;
  margin-left:6px;
}
section[id*="timelinev2"] .tp-hide-original{
  display:none !important;
}

@media (max-width:980px){
  section[id*="timelinev2"] .tp-timeline{
    padding:28px 5px 28px 15px;
  }
  section[id*="timelinev2"] .tp-timeline__list{
    gap:18px;
  }
  section[id*="timelinev2"] .tp-item{
    grid-template-columns:1fr clamp(104px,24vw,120px);
    gap:5px;
    align-items:start;
  }
  section[id*="timelinev2"] .tp-rail{
    min-height:92px;
  }
  section[id*="timelinev2"] .tp-dot{
    left:14px;
    top:14px;
    width:12px;
    height:12px;
    transform:translate(-50%,0);
  }
  section[id*="timelinev2"] .tp-rail-global{
    width:1px;
    left:calc(100% - clamp(104px,24vw,120px) + 14px - .5px);
  }
  section[id*="timelinev2"] .tp-meta{
    top:14px;
    transform:none;
    left:calc(14px + 6px + 5px);
    max-width:calc(clamp(104px,24vw,120px) - (14px + 6px + 5px + 6px));
  }
  section[id*="timelinev2"] .tp-date{
    font-size:10px;
    letter-spacing:.10em;
    max-width:100%;
  }
  section[id*="timelinev2"] .tp-date-main,
  section[id*="timelinev2"] .tp-date-year{
    padding-left:3px;
    padding-right:3px;
    box-sizing:border-box;
  }
  section[id*="timelinev2"] .tp-date-year{
    display:block;
    margin-left:0;
    margin-top:2px;
  }
  section[id*="timelinev2"] .tp-card{
    grid-template-columns:1fr;
  }
  section[id*="timelinev2"] .tp-card__media{
    aspect-ratio:4/3;
    position:relative;
  }
  section[id*="timelinev2"] .tp-card__body{
    padding:18px 18px 22px;
  }
  section[id*="timelinev2"] .tp-card__h{
    font-size:22px;
  }
  section[id*="timelinev2"] .tp-btn{
    width:100%;
    height:44px;
  }
}
</style>


<script>
!function(){function e(e){var t,n,a=e&&e.getAttribute("data-current-context");if(!a)return null;try{return JSON.parse(a)}catch(e){}try{return JSON.parse((t=a,(n=document.createElement("textarea")).innerHTML=String(t||""),n.value))}catch(e){}try{return JSON.parse(String(a).replace(/&quot;/g,'"'))}catch(e){}return null}function t(e){return String(e||"").replace(/\s+/g," ").trim()}function n(e){var n=(e?[].slice.call(e.querySelectorAll("p")):[]).map((function(e){return t(e.textContent||"")})).filter(Boolean);if(!n.length)return{t:"",p:""};var a=n.findIndex((function(e){return"#"===e}));return a<0?{t:n[0]||"",p:n.slice(1).join(" ").trim()}:{t:n.slice(0,a).filter((function(e){return"#"!==e})).join(" ").trim(),p:n.slice(a+1).filter((function(e){return"#"!==e})).join(" ").trim()}}function a(){var a=document.querySelector('section[id*="timelinev2"]');if(a){var r=a.querySelector("ul.user-items-list-item-container");if(r){var i=a.querySelector(".list-section-title p"),l=t(i?i.textContent:"")||"Timeline",c=e(r),o=c&&c.userItems?c.userItems:null,d=[].slice.call(r.querySelectorAll("li.list-item"));!d.length&&o&&o.length&&(d=new Array(o.length).fill(null));var s=a.querySelector(".tp-timeline");s&&s.remove();var m=document.createElement("div");m.className="tp-timeline";var u=document.createElement("h2");u.className="tp-timeline__title",u.textContent=l,m.appendChild(u);var p=document.createElement("div");p.className="tp-timeline__list",p.id="tpTimelineList";var v=document.createElement("div");v.className="tp-rail-global",v.id="tpRail",p.appendChild(v),d.forEach((function(e,a){var r="",i="",l="",c="#",d=!0,s="",m="";if(e){var u=e.querySelector(".list-item-content__title");r=t(u?u.textContent:"");var v=n(e.querySelector(".list-item-content__description"));s=v.t,m=v.p;var h=e.querySelector("img.list-image");i=t(h&&(h.getAttribute("data-src")||h.getAttribute("src"))||"");var f=e.querySelector("a.list-item-content__button, a.sqs-block-button-element");f&&(l=t(f.textContent),c=t(f.getAttribute("href")||"#"),d="_blank"===f.getAttribute("target"))}if(o&&o[a]){var g=o[a];if(r||(r=t(g.title)),!s&&!m&&g.description){var y=document.createElement("div");y.innerHTML=g.description;var C=n(y);s=C.t,m=C.p}l&&c||!g.button||(l=t(g.button.buttonText)||l,c=t(g.button.buttonLink)||c,d=!!g.button.buttonNewWindow),!i&&g.image&&g.image.assetUrl&&(i=t(g.image.assetUrl))}s||(s=r||"Item "+(a+1)),m=m||"";var E,b,N=(E=t(r),(b=E.match(/^(.*?)(\b\d{4}\b)\s*$/))?{main:t(b[1]).replace(/[,\s]+$/,"").trim()||E,year:t(b[2])||""}:{main:E,year:""}),S=document.createElement("article");S.className="tp-item";var x=document.createElement("div");x.className="tp-card";var _=document.createElement("div");_.className="tp-card__body";var q=document.createElement("h3");q.className="tp-card__h",q.textContent=s;var w=document.createElement("p");w.className="tp-card__p",w.textContent=m;var L=document.createElement("div");L.className="tp-actions";var A=document.createElement("a");A.className="tp-btn",A.textContent=l||"Learn more",A.href=c||"#",d&&(A.target="_blank",A.rel="noopener"),L.appendChild(A),_.appendChild(q),_.appendChild(w),_.appendChild(L);var M=document.createElement("div");M.className="tp-card__media";var T=document.createElement("img");T.className="tp-img",T.alt="",T.src=i||"",M.appendChild(T),x.appendChild(_),x.appendChild(M);var k=document.createElement("div");k.className="tp-rail";var H=document.createElement("span");H.className="tp-dot";var I=document.createElement("div");I.className="tp-meta";var O=document.createElement("div");O.className="tp-date";var R=document.createElement("span");if(R.className="tp-date-main",R.textContent=N.main||r,O.appendChild(R),N.year){var j=document.createElement("span");j.className="tp-date-year",j.textContent=N.year,O.appendChild(j)}I.appendChild(O),k.appendChild(H),k.appendChild(I),S.appendChild(x),S.appendChild(k),p.appendChild(S)})),m.appendChild(p);var h=a.querySelector(".user-items-list");h?h.appendChild(m):a.appendChild(m),r.classList.add("tp-hide-original");var f=a.querySelector(".list-section-title");f&&f.classList.add("tp-hide-original"),function(e){var t=e.querySelector("#tpTimelineList"),n=e.querySelector("#tpRail");if(!t||!n)return;var a=[].slice.call(t.querySelectorAll(".tp-dot"));if(!a.length)return;var r=0,i=0;function l(e,t,n){return e<t?t:e>n?n:e}function c(e){var t=e.getBoundingClientRect();return t.top+t.height/2}function o(){return window.matchMedia&&window.matchMedia("(max-width:980px)").matches}function d(e,a){var r=e-t.getBoundingClientRect().top,i=Math.max(0,a-e);return n.style.setProperty("--tp-rail-top",r+"px"),n.style.setProperty("--tp-rail-h",i+"px"),i}function s(e,t){return l((o()?.58*window.innerHeight:.55*window.innerHeight)-e,0,t)}function m(e,t,n){for(var r=0;r<a.length;r++){var i=l(c(a[r])-e,0,t);a[r].classList.toggle("is-active",i<=n+.5)}}function u(){r=0;var e=c(a[0]),t=d(e,c(a[a.length-1])),l=s(e,t);i+=.12*(l-i),Math.abs(l-i)<.35&&(i=l),n.style.setProperty("--tp-progress-h",i+"px"),m(e,t,i),Math.abs(l-i)>=.35&&p()}function p(){r||(r=requestAnimationFrame(u))}window.addEventListener("scroll",p,{passive:!0}),window.addEventListener("resize",(function(){i=0,p()})),document.fonts&&document.fonts.ready&&document.fonts.ready.then(p).catch((function(){}));p()}(m)}}}function r(){a()}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r(),document.addEventListener("mercury:load",r)}();
</script>

If you don’t want to use complex code, you can use Timeline tool (Free).

You can adjust text, button, image easier

and choose a lot of layout.

#2. Customize

#2.1. To change item background, find this line

section[id*="timelinev2"] .tp-card {
    background: #f5f5f5;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr 44%;
    overflow: hidden;
}

#2.2. To change Title style, find this line

section[id*="timelinev2"] .tp-card__h {
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #111;
}

To change description style, find these

section[id*="timelinev2"] .tp-card__p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
    color: #333;
    max-width: 58ch;
}

with button, find these

section[id*="timelinev2"] .tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    border: 1px solid #ff3b2f;
    color: #ff3b2f;
    background: transparent;
}

#2.3. To change gap between timeline items, find these

section[id*="timelinev2"] .tp-timeline__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

#2.4. To change red circle color, find this

section[id*="timelinev2"] .tp-dot.is-active {
    background: red;
}

#2.5. To change Date style, find this

section[id*="timelinev2"] .tp-date {
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ff3b2f;
    white-space: normal;
    overflow-wrap: anywhere;
}

#2.6. To change red vertical line, find this

section[id*="timelinev2"] .tp-rail-global:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: var(--tp-progress-h, 0px);
    background: #ff3b2f;
    border-radius: 999px;
}

#2.7. To change gray circle color, find this

section[id*="timelinev2"] .tp-dot {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #cfcfcf;
    transition: background .25s ease;
}

#2.8. To change gray vertical line, find this

section[id*="timelinev2"] .tp-rail-global {
    position: absolute;
    top: var(--tp-rail-top, 0px);
    height: var(--tp-rail-h, 0px);
    width: 2px;
    background: #e8e8e8;
    border-radius: 999px;
    z-index: 0;
    left: calc(100% - 240px + 32px - 1px);
}