EverWeb Widgets

ThemeKit Snap Grid

ThemeKit Snap Grid 1

Grid Layout

Displaying items in a grid like this is much better than using a slideshow and is more likely to hold a visitor's attention
The grid is centered with a maximum width and can have up to 48 items.

Widgets
ThemeKit Snap Grid 2

Grid Items

Each grid item has 12 columns with an image and alt text in an HTML5 <figure> and text in an <article> element.
The optional link can open internal or external pages.

Content
ThemeKit Snap Grid 3

Staggered Layout

The items are staggered using the CSS nth-of-type selector to vary the positions of the odd and even items.
The layout can be switched by checking a box.

Icon Grid
ThemeKit Snap Grid 4

Horizontal Overlap

This can be adjusted using the value set for grid-column gap and the article element's left/right margin.

Lightbox Grid
ThemeKit Snap Grid 5

Vertical Overlap

The image overlap is created using a negative top margin on all the <figure> elements apart from the first one.

Square Grid

Snap Grid Info

Using an offset layout with ample "white space" allows the visitor to find and focus on items a lot easier than if they were packed into tight rows.
Overlapping the text onto an image makes it very clear that the text and image are related.
This type of grid is much better than a slideshow for displaying items with an image and info. The images can be a lot smaller, there are no external scripts to download and the images can be lazy loading by checking a box.