Webflow Collection Lists

Make the most of Webflow's elements.

View the Demos
SYGNAL ATTRIBUTES 5

Smart-Limit Lists, by Breakpoint

Limit lists to a multiple of N items, great to make sure you always have that 3-column layout filled.

It's responsive, too.

NO-CODE, attributes-only solution.

How to implement

Limit to a multiple of N items.

This list is configured to show a multiple of 5 items.

10 Quick Tips About Blogging

15 Best Blogs To Follow About Web Design

7 Ways To Improve Website Usability And Accessibility

5 Principles Of Effective Web Design

Designers Who Changed the Web

7 Must Have Tools For Web Designers

7 Things About Web Design Your Boss Wants To Know

What Will Website Be Like In 100 Years?

20 Myths About Web Design

5 Web Design Blogs You Should Be Reading

The History Of Web Design

7 of the Best Examples of Beautiful Blog Design

SYGNAL ATTRIBUTES 5

Smart Filtering

Filter your elements by custom attributes.

NO-CODE, attributes-only solution.

How to implement

Filter by time of Day.

Time-of-day filter, shows a different image before and after noon.

Morning
Afternoon
SYGNAL ATTRIBUTES 5

Decode HTML from a CMS plaintext field

Sometimes, you need the ability to store a chunk of HTML in the CMS. This is one way.

NO-CODE, attributes-only solution.

How to implement

Decode.

This YouTube video embed HTML is stored directly in the CMS in a plain text field, and decode when the page loads.

<iframe width="560" height="315" src="https://www.youtube.com/embed/sO0yY85pMUs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

SYGNAL ATTRIBUTES 5

Smart filtering, using a custom function

Unlimited use cases. Filter your collection lists dynamically using a smart filter.

LO-CODE solution.

How to implement

Filter func.

This list is filtered based on a function.

10 Quick Tips About Blogging

15 Best Blogs To Follow About Web Design

7 Ways To Improve Website Usability And Accessibility

5 Principles Of Effective Web Design

Designers Who Changed the Web

7 Must Have Tools For Web Designers

7 Things About Web Design Your Boss Wants To Know

What Will Website Be Like In 100 Years?

20 Myths About Web Design

5 Web Design Blogs You Should Be Reading

The History Of Web Design

7 of the Best Examples of Beautiful Blog Design

SYGNAL ATTRIBUTES 5

Filter, by func

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Filter func month.

Here we are filtering 12 collection items that show a monthly special. Only the current month isshown.

Winter Wonderland Deals

Celebrate the festive season with our December specials.

December

Thanksgiving Treats

Special offers to be thankful for!

November

Fall Fiesta

Embrace the autumn chill with our special offers.

October

Back to School Bargains

Gear up for school with exclusive deals!

September

Summer Escape Specials

Beat the heat with our cool August offers.

August

July Jubilee

Independence month specials you won't want to miss!

July

Valentine's Serenade

Book a romantic getaway for two this month!

February

New Year's Wellness Boost

Kick off the year with a rejuvenating wellness package!

January

Easter Extravaganza

Exclusive offers for all your Easter needs!

April

Spring Bloom Offer

Spring into action with our special March discounts!

March

May Flowers Special

Celebrate the bloom with a floral retreat.

May

Summer Kickoff Sale

Dive into summer with these sizzling deals!

June

SYGNAL ATTRIBUTES 5

Filter, by CSS selector match

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Filter match month.

Here we are filtering 12 collection items that show a monthly special. Only the current month isshown.

Winter Wonderland Deals

Celebrate the festive season with our December specials.

December

Thanksgiving Treats

Special offers to be thankful for!

November

Fall Fiesta

Embrace the autumn chill with our special offers.

October

Back to School Bargains

Gear up for school with exclusive deals!

September

Summer Escape Specials

Beat the heat with our cool August offers.

August

July Jubilee

Independence month specials you won't want to miss!

July

Valentine's Serenade

Book a romantic getaway for two this month!

February

New Year's Wellness Boost

Kick off the year with a rejuvenating wellness package!

January

Easter Extravaganza

Exclusive offers for all your Easter needs!

April

Spring Bloom Offer

Spring into action with our special March discounts!

March

May Flowers Special

Celebrate the bloom with a floral retreat.

May

Summer Kickoff Sale

Dive into summer with these sizzling deals!

June

SYGNAL ATTRIBUTES 5

Nested lists

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Random Sorted items.

Random.

10 Quick Tips About Blogging

15 Best Blogs To Follow About Web Design

7 Ways To Improve Website Usability And Accessibility

5 Principles Of Effective Web Design

Designers Who Changed the Web

7 Must Have Tools For Web Designers

7 Things About Web Design Your Boss Wants To Know

What Will Website Be Like In 100 Years?

20 Myths About Web Design

5 Web Design Blogs You Should Be Reading

The History Of Web Design

7 of the Best Examples of Beautiful Blog Design

SYGNAL ATTRIBUTES 5

Nested lists

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Alphabetic Sorted items.

Descending on title.

10 Quick Tips About Blogging

15 Best Blogs To Follow About Web Design

7 Ways To Improve Website Usability And Accessibility

5 Principles Of Effective Web Design

Designers Who Changed the Web

7 Must Have Tools For Web Designers

7 Things About Web Design Your Boss Wants To Know

What Will Website Be Like In 100 Years?

20 Myths About Web Design

5 Web Design Blogs You Should Be Reading

The History Of Web Design

7 of the Best Examples of Beautiful Blog Design

SYGNAL ATTRIBUTES 5

Nested lists

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Date Sorted items.

Descending on date.

10 Quick Tips About Blogging

February 14, 2023

15 Best Blogs To Follow About Web Design

January 16, 2023

7 Ways To Improve Website Usability And Accessibility

October 3, 2023

5 Principles Of Effective Web Design

January 17, 2024

Designers Who Changed the Web

November 19, 2022

7 Must Have Tools For Web Designers

January 2, 2023

7 Things About Web Design Your Boss Wants To Know

October 5, 2023

What Will Website Be Like In 100 Years?

May 18, 2024

20 Myths About Web Design

January 30, 2023

5 Web Design Blogs You Should Be Reading

July 14, 2024

The History Of Web Design

March 16, 2023

7 of the Best Examples of Beautiful Blog Design

June 30, 2023
SYGNAL ATTRIBUTES 5

Nested lists

Need easily managed nested lists in your rich text content?

Sygnal Attributes gives you the ability to transform the native single-level list into nested lists using a simple indent-indicator.

For example this list;

  1. level 1
  2. > level 2
  3. >> level 3

Is automatically transformed to three levels of depth.

NO-CODE, attributes-only solution.

How to implement

Numeric Sorted items.

Ascending on price.

10 Quick Tips About Blogging

February 14, 2023
60462.72

15 Best Blogs To Follow About Web Design

January 16, 2023
51230.78

7 Ways To Improve Website Usability And Accessibility

October 3, 2023
90688.01

5 Principles Of Effective Web Design

January 17, 2024
88197.09

Designers Who Changed the Web

November 19, 2022
67986.52

7 Must Have Tools For Web Designers

January 2, 2023
93575.56

7 Things About Web Design Your Boss Wants To Know

October 5, 2023
40532.38

What Will Website Be Like In 100 Years?

May 18, 2024
83007.19

20 Myths About Web Design

January 30, 2023
65191.73

5 Web Design Blogs You Should Be Reading

July 14, 2024
70021.56

The History Of Web Design

March 16, 2023
40431.45

7 of the Best Examples of Beautiful Blog Design

June 30, 2023
58470.59
SYGNAL ATTRIBUTES 5

Sort, by weekday

Uses wfu-sort on a Collection List to dynamically sort the items in the list.

  • Each CMS item has a weekday # from 0 = Sun to 6 = Sat.
  • A small script inside the collection list item recalculates the sort key based on today's weekday.
  • The weekday will be based on the user's local clock, in the current code.

LO-CODE  solution.

How to implement

Auto-sorted Business Opening Hours

This sorting demo displays a hypothetical business's opening hours, and sorts them by weekday with today's weekday at the top.

Sunday
09:00 - 18:00
Monday
09:00 - 18:00
Tuesday
09:00 - 18:00
Wednesday
Closed
Thursday
09:00 - 18:00
Friday
09:00 - 18:00
Saturday
10:00 - 18:00