Timeline based on CMS

Design help General
1

Hey!

According to my current project i need help with a timeline based on a cms.
Integrating a timeline is no problem so far.
But how to integrate a cms and get content from that?!

This is how it might look like:

Hope anyone can help me!
Thanks for your help in advance. :slight_smile:

Theresake

2

Hey @theresake

Here’s my quick thoughts.

  • Add a collection list
  • Give it display:flex with vertical orientation
  • Sort descending by date
  • Design item cards
  • Use custom code with .collection-list:nth-child(odd) to alternate CSS for cards

If you want to have year headings or something similar to the example, you’ll need multiple collection lists on the page. Use filters to limit each collection to a year (for example).

Hope this helps. Let me know if you have further questions.

2 Likes
3

I got it so far - it works. Thanks for your help! :slight_smile:
But a further thing i need to fix is the float. I actually want the items to be displayed with a little difference in top margin left and right around my timeline …
The following way isnt working :confused:
.collection-list-name:nth-child(odd)

.collection-list-name:nth-child(odd) {top:40px}

Can you help again?

4

Should be written as either of the following:

.collection-list-name:nth-child(odd) {margin-top:40px;}
or
.collection-list-name:nth-child(odd) {margin: 40px 0 0 0;}

Try that and let me know.