Creating a timeline pattern

(Innes Zenati) #1

Matrix Version: 6.21.2

Hey, looking for some advice / help on how I would create something like this - https://design.tax.service.gov.uk/hmrc-design-patterns/timeline/

Has anyone built / created something similar?

Thanks
Innes

(Iain Simmons) #2

Hi Innes,

You can view and copy the HTML used in that design system, and then use your browser’s developer tools to inspect the elements and see what CSS is being used.

It seems to just be an ordered list with a thick blue left border, and then each list item contains a h2 with a ::before pseudo-element containing a blue box with a height matching that border width.

Good luck!
– iain

(Innes Zenati) #3

Hi Iain,

Thanks for getting back to me.

Yeah I thought that would be the case but the nunjucks part threw me as it sounded like I needed this for it to work. Will give that a try and see how I get on.

Thanks
Innes

(Nick Papadatos) #4

This is more having to do some lines of CSS.

Capture

Are you happy for me to message you the files/code?

Let me know

Nick

#5

Hi @innesz
While there are a few ways to build a timeline, here’s one approach I’ve used in the past. It doesn’t use pseudo elements like Gov.UK.
I’ve used circles previously and have added a line option.

CSS

.timeline {padding-left:0.5rem;margin-bottom:0; list-style:none;}
.timeline h2 {margin:0;line-height:1;}
.timeline-event {margin:0; padding:0.5em 0 2rem 0; border-left: 0.25rem solid #999; display:flex; flex-wrap:nowrap;}
.timeline-event > div {margin-left:0.5rem; flex-basis:calc(100% - 2rem);}
.timeline-event .timeline-icon.timeline-icon-circle {margin-left: -1rem; margin-right:0.25rem; flex-basis:1.5rem; width:1.5rem; height:1.5rem; border:0.125rem solid #999; border-radius:50%; background:#fff;}
.timeline-event .timeline-icon.timeline-icon-line {background-color: #999; margin-left:0; height: 0.25rem; left: 0; margin-top: 0.5rem; width: 1rem; flex-basis: 1rem;}

HTML

<ul class="timeline">
  <li class="timeline-event">
    <div class="timeline-icon timeline-icon-line"></div>
    <div>
      <h2>Event 1</h2>
      <div>
        <date>24 Nov 2022</date> to <date>16 Nov 2023</date>
      </div>
    </div>
  </li>
  <li class="timeline-event">
    <div class="timeline-icon timeline-icon-line"></div>
    <div>
        <h2>Event 2</h2>
    </div>
  </li>
  <li class="timeline-event">
    <div class="timeline-icon timeline-icon-circle"></div>
    <div>
        <h2>Event 3</h2>
    </div>
  </li>
</ul>
(Nick Papadatos) #6

hey np81, your markup was exactly what I had…

(Innes Zenati) #7

Hey guys, this is great. Thanks very much for taking the time to reply and share with me. I will get to work on this soon.