All updates

Feature

CMS

Style first, last, even, and odd items in Collection Lists

Now you can uniquely style first, last, even, and odd items in ecommerce and CMS-driven Collection Lists.

Style first, last, even, and odd items in Collection Lists

Now you can uniquely style first, last, even, and odd items within a Collection List to give your content-driven designs a distinctive look.

You can set these styles from any Collection Item in a Collection List from the states dropdown. Simply select from the options in the structure section and set unique styles for that pattern that will apply across your Collection List.

For example, say you want to give a list of teammates an alternating background color. Simply pick odd or even, set a unique background style, and boom: that’s it, you did it.

Grid layout of team page with alternating styles on all odd items.
Style odd or even items in a Collection List to give them a unique alternating look

You can also use the first and last option to style common UI patterns like breadcrumb navigation, or a list of tags on a blog post.

Blog post page with tags list whose first and last are styled with rounded edges.
Give dynamic lists like tabs their own styles for first and last items. Look at those cute little rounded edges right?


Now you can uniquely style first, last, even, and odd items within a Collection List to give your content-driven designs a distinctive look.

You can set these styles from any Collection Item in a Collection List from the states dropdown. Simply select from the options in the structure section and set unique styles for that pattern that will apply across your Collection List.

For example, say you want to give a list of teammates an alternating background color. Simply pick odd or even, set a unique background style, and boom: that’s it, you did it.

Grid layout of team page with alternating styles on all odd items.
Style odd or even items in a Collection List to give them a unique alternating look

You can also use the first and last option to style common UI patterns like breadcrumb navigation, or a list of tags on a blog post.

Blog post page with tags list whose first and last are styled with rounded edges.
Give dynamic lists like tabs their own styles for first and last items. Look at those cute little rounded edges right?



Launched on
September 30, 2020
Category
CMS

Related updates

Introducing the next-gen Webflow CMS

Introducing the next-gen Webflow CMS

Learn more
Expanded on-canvas editing

Expanded on-canvas editing

Learn more
CMS auto-save

CMS auto-save

Learn more
CMS Collection list updates

CMS Collection list updates

Learn more
Comment directly on dynamic CMS content in Webflow

Comment directly on dynamic CMS content in Webflow

Learn more
Use existing assets for OG images

Use existing assets for OG images

Learn more

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.