The list has a sticky header with a heading and optional scroll arrows. The overflow is set to "scroll" so that any amount of list items can be added up to a maximum of 100.
The widget can be used at content width or reduced in width to act as a sidebar for links to other pages, latest news or blog posts. Since it uses the EverWeb widget API Assets List to create the items, they can be easily reordered by dragging them to a different position in the list.
This is an optional paragraph to describe the contents of the list. The list has a choice of style types and the one used in this demo is "decimal"
Each list item has a heading, text and a CTA style link so that the widget can be used on pages that will be viewed on tablets and mobile phones. The links can be aligned left, center or right and can be turned on/off globally.
Image GridThe grid has images with a text description and an info link. The number of images per row changes with the browser or device width.
The widget uses jQuery to keep the grid item heights equal despite different amounts of text content. There is an optional h1 heading and descriptive text which can be placed before or after the grid.
News GridEach item in the grid has an image to the left and a text block to the right when viewed on computers. The items sit side by side in pairs. On tablets in portrait mode, the text slides below the image and on mobil phones, the right item slides below the left.
Each text block has date field, heading, text and a CTA style hyperlink.
Random ImageThe grid is used to display random sized images which are arranged in columns. The number of columns reduces with the browser or device screen width.
The images can have a centered overlay caption with adjustable background opacity. By default, each image is a hyperlink but this can be negated if required.
Product GridThe grid items display an image to the left and a text block with heading, price/info, text and a CTA style link. The items are display in pairs on wider screens.
On tablet devices, the text slides over the image with a transparent overlay and the items remain in pairs.
On mobile phones, the right hand item slides below the left.
Brand GridBeing able to accommodate up to one hundred items, the grid can be used as an illustrated navigation. Each item has an image to the left and text block to the right and are stacked one above the other.
The text block has a heading for the item name, a paragraph and a CTA style link tab. As the browser or device width decreases, the text slides below the image.
Switch GridEach grid item has an image with optional info link, heading and text.. The items appear in rows of three when viewed on computers with the text below. On tablets the text switches to the right of the image and the items are arranged in a column. On smart phones, the text switches below the image again.
The jQuery matchHeight plugin is used to keep the items height equal despite varying content.