Nest

Example 1: Nested Collections on 2 lists

Simulated nested Collections on 2 CMS Lists on the page

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List that is visible to the user

  • The structure of our CMS Collection List that is hidden

  • The .nest() component to simulate nested Collections for 2 CMS Lists on the page

Project 1

Branding, Web Design

Cool, Happy
Project 2

Branding

Life Changing, Redonkulous, Happy
Project 3

Web Design

Cool
Project 4

Development

Happy, Interesting
Project 5

Development

Cool, Funny, Life Changing
Project 6

Motion Graphics

Redonkulous
Project 7

Branding

Funny, Life Changing, Happy
Project 8

Web Design

Cool, Happy
Project 9

Web Design, Development

Happy, Fun, Redonkulous, Life Changing, Interesting, Funny
Project 10

Web Design, Development

Interesting
Project 11
our multi-reference tags will be 'pasted' here! our text-based list is below
Redonkulous, Life Changing, Interesting, Happy, Funny, Awesome, Fun, Cool
Project 12
our multi-reference tags will be 'pasted' here! our text-based list is below
we have no tags here!
Project 13
our multi-reference tags will be 'pasted' here! our text-based list is below
Fun, Interesting
Project 14
our multi-reference tags will be 'pasted' here! our text-based list is below
Interesting, Funny, Life Changing
Project 15
our multi-reference tags will be 'pasted' here! our text-based list is below
Redonkulous, Life Changing
Project 16
our multi-reference tags will be 'pasted' here! our text-based list is below
Funny, Life Changing, Awesome, Redonkulous
Project 17
our multi-reference tags will be 'pasted' here! our text-based list is below
Life Changing, Cool
Project 18
our multi-reference tags will be 'pasted' here! our text-based list is below
Interesting, Funny, Fun
Project 19
our multi-reference tags will be 'pasted' here! our text-based list is below
Fun
Project 20
our multi-reference tags will be 'pasted' here! our text-based list is below
Happy

Our Multi-Reference Collection List. You can make this 'display: none' on the page

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.