Add Classes

Example 4: Timeline

We apply our 'timeline' styles to every other item in the List. This will create a timeline style layout in our Collection List.

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List

  • Establishing all of the add-on classes on a static structure

  • Setting up our array (list) to hold all of the class pairings. In this How To our add-on classes create a Timeline layout

  • The .addclasses() component to add unique classes inside the Collection List

  • An explanation of start and frequency

2019
Project 1

Branding, Web Design

2020
Project 2

Branding

2017
Project 3

Web Design

2018
Project 4

Development

2018
Project 5

Development

2018
Project 6

Motion Graphics

2019
Project 7

Branding

2020
Project 8

Web Design

2020
Project 9

Web Design, Development

2020
Project 10

Web Design, Development

2019
Project 11

Strategy Consulting

2017
Project 12

Web Design, Development

2019
Title

The rich text element allows you stuff.

‍

2019
Title

The rich text element allows you stuff.

‍

2019
Title

The rich text element allows you stuff.

‍

2019
Title

The rich text element allows you stuff.

‍

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.

More examples
Left/right flip sections
1/3 - 2/3 irregular grid
Offset color cards
Timeline
Interactions 1
Interactions 2
Combine
Component
Load More
Component
Made with
by