sunweb

Collection Row

components collection-row

Definition


The collection row component is used to show a list of items with a picture to be an entry point for another page. The name is because was typically used to present collections on home pages. It can be used for this purpose or others as well.

By default it's displayed as row items, but they are expandable to actionable items with prominent image. The breakpoint where they expand can be configurable on certain cases.

c-collection-row

Handlebars

Loading...

The collection row items can have a collection assigned, which change their style.
This visual styles could be applied only if the brand has theme color schemes.
A collection row could contain items with different collections.

Handlebars

Loading...

Variants


c-collection-row tiledFrom@[breakpoint]
The tiledFrom property makes the items tiled from the specified breakpoint. The current breakpoints supported are: "xxs", "sml", "md".
c-collection-row tiledFrom@xxs

Handlebars

Loading...
c-collection-row tiledFrom@md

Handlebars

Loading...

c-collection-row expandedFrom@[breakpoint]
The expandedFrom property makes the items expanded from the specified breakpoint. The current breakpoints supported are: "xxs" (always expanded), "sml", "md".
c-collection-row expandedFrom@xxs

Handlebars

Loading...
c-collection-row expandedFrom@md

Handlebars

Loading...
The expandedFrom property can also be applied to collection items.
c-collection-row expandedFrom@xxs

Handlebars

Loading...
c-collection-row expandedFrom@xxs

Handlebars

Loading...
c-collection-row expandedFrom@md

Handlebars

Loading...
c-collection-row expandedFrom@md

Handlebars

Loading...

Modifiers


c-collection-row neutral
The neutral property reduces the collection color making the content overlay white. The neutral property only applies to the collection items when are expanded. Please consider to use the neutral property when displaying multiple items belonging to same collection.

Handlebars

Loading...