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
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
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
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
This is more having to do some lines of CSS.
Are you happy for me to message you the files/code?
Let me know
Nick
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>
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.