EverWeb Widgets

Responsive Grid Widgets [4]

Responsive widgets based on the CSS Grid Layout Module for better responsive page design using less code.
Click any widget icon to see the demo …

View CartAdd To Cart

Badge Grid

A grid for setting up sponsor and affiliate badge links. The grid can have up to 48 items. The links are created using JPG images inserted in a circular container which has options for adjusting the size and adding a border and/or a box shadow.
The optional captions sit below the images and can be hidden on mobile devices if required.

Card Grid

The card grid can be used to advertise sponsors, suppliers and associated websites. The grid will create up to 48 cards. The number of cards per row is adjustable for each device type.
The cards have a heading, dividing line with a width setting, a text block, an optional span, an optional text block and a link.

Flip Card Grid

One side of the flip cards has an image with an overlay caption. The cards have a tilt action on hover when viewed on computers. On click the back face is reveal.
The back of the card has a heading, text and an optional CTA style link tab and the content is centered horizontally and vertically.

Info Image Card Grid

Each card shows an image, heading and action button on page load. On click, the title/date, info text and optional CTA style link are revealed. Opening another item will close the previously opened one.
The grid can hold up to 48 items and the number of items per row can be set for each device type. Any card or group of cards can be open on page load.

PNG Icon Cards

This is similar to the Image Icon Card Grid except it has centered PNG image icons. These can be styled with a border and/or box shadow and can be made round if required.
The drop down has the option for a "title" which can have a contrasting color and the CTA style link can be configured to open internal or external pages.

Ionicon Info Cards

This is similar to the Image Icon Card Grid except it has centered Ionicon icons. These can be styled with a border and/or box shadow and can be made round if required.
The widget has a built in link which opens the Ionicon Cheatsheet where keywords can be inserted in a box to quickly search for and find icons.

Font Awesome Info Cards

This version of the Info Card widget uses Font Awesome icons. These can be styled with a border and/or box shadow and can be made round if required.
The widget has a built in link which opens the Font Awesome Cheatsheet which has a search box for finding icons using keywords.

Slide Up Image or PNG Icon Grid

The grid items can contain either a centered PNG icon or a full width image with options for a heading, text and to configure the image as a link.
The grid items have a slide up animation as they scroll into the viewport. This can be staggered by applying a different delay to the items in the row.

Slide Up FA Icon Grid

The grid items have a centered Font Awesome icon with options for a heading, text and to configure the image as a link to internal or external pages with a new window option.
The grid items have a slide up animation as they scroll into the viewport. This can be staggered by applying a different delay to the items in the row.

Slide Up Ionicon Grid

he grid items have a centered Ioniconicon with options for a heading, text and to configure the image as a link to internal or external pages with a new window option.
The grid items have a slide up animation as they scroll into the viewport. This can be staggered by applying a different delay to the items in the row.

Shuffle Links

The grid items can appear in order or, by checking a box, appear in a random order each time the page is loaded.
The items are laid out using the CSS Grid Layout Module to place the image in one column and the text in the other.
The layout switches to one column at the break point with the text below the image. When the image is configure as a link, it has a link icon in the top, right corner.

Sponsor & Supplier Links

The links are laid out in a grid with two items per row. The order of the items can be shuffled each time the page is reloaded.
Each grid item has an image with a fixed width and a text block with a heading, text and a CTA style link tab. Both the image and the text block are vertically aligned in the center.

© EverWeb Widgets -