Build amazing sites with this great collection of componentsBuy Now

Collections

Collections group related content

Related content elements can be visually grouped together as a collection. These collections can be created both from unordered list elements and containers by ading the .collection class to the parent and the class .collection-item to each of the inside elements.

The collapsible body — the element that is exposed after the click — can contain all sorts of (secondary) content, including links to even further explore the subject.

Collapsibles are very versatile elements that can be used for all types of situations, from navigation menus to product galleries.

Basic Collection

Link Collection

Linked Text Linked Text Linked Text Linked Text Linked Text

Collection with Header

To create a collection with a header simply add the .with-header class to the parent. Use the class .collection-header instead of .collection-item to set the default header styles.

The header section is clickable and will expose the body content. If you are looking at this in Site designer please click Preview on...to see this in action.

Collection card

A visually atractive variation of the simple collection list.