EverWeb Widgets

EverWeb Responsive Stacking Row Widgets [3]

These widgets create a row of three inline items and and were designed as a much better alternative to creating items using the EverWeb Responsive Row.
Click any widget icon to see the demo …

View CartAdd To Cart

Image - List - Text

A three column grid layout with an image, a styled list and a text block. The list has all the posted used style options and the list items have controls to adjust the inset and vertical spacing.
The text block has a heading, paragraph and a link. It is the responsive item when all three columns are inline. Like the other widgets in this pack, the items can be self aligned start, center, end or auto.

Image - Text - Image

A responsive row with an image, text block and another image. The first image and the text have a fixed with on wide screens and the right hand image is responsive with a width set in fractional units. This allows its proportions to be adjusted in relation to the other items.
The left image can be configured as a hyperlink and the text block has a heading and a paragraph.

Image - Text - Text

A responsive row with an image and two text blocks. The first image and the first text block have a fixed with on wide screens and the right hand text block is responsive with a width set in fractional units.
The right hand text block sits at full width below the other two items after the break point and has an heading, text and a CTA style link tab.

Flip Cards

Three inline images with overlay caption and a flip icon when viewed on touch devices. The cards tilt on hover when viewed on computers and flip on click or tap to reveal the backside.
The back has a heading, text with all the alignment options and a CTA style link tab which can be configured to open internal or external pages and in a new window if required.

3 Images

Insert three images width different sizes and aspect ratio in a responsive grid row. The images have an overlay caption which can appear on hover on computers. The last image can be configured as a hyperlink and shows a link icon if required.
The items can be vertically aligned using the grid layout "align-self" property.

Photo Display Row

Three images in a row have options for styling them with a border and/or a box shadow. The caption overlay can animate in on hover on computers and appear on page load on touch devices.
Each it has a heading and text. The optional links are positioned absolutely in relation to the bottom and centered using a CSS transform.

3 Text Row

A row of three text blocks - each with a heading, text and an optional CTA style link tab which can open internal or external pages and in a new window if required.
The first two items have a fixed width and the last one is responsive. They all become responsive below the break point and stack when viewed on mobile phones.

Round Image Wrap row

The row has three items - each with a heading, text, image, wrap text and an optional link. In this case the images are round and can have a border and/or a box shadow.
The items use the "shape-outside" selector with a value of "circle" and a right margin to space the text away from the image to get the text lines to follow the image's curve.

3 Info Images

Each item is an HTML5 <article> element with a figure, heading and text. The images are in a <figure> element with an optional overlay caption and an info link icon.
The captions and/or the links can be set to display on hover when viewed on computers and appear on page load when viewed on touch devices.

Ionicon Icons

Each of the three items in the row have an icon, heading, text and an optional CTA style link. The link can open internal or external pages and in a new window if required.
The icons are from the Ionicon range and are an alternative to the Font Awesome icons. The widget has a link to the Ionicon cheatsheet which is hosted on the EverWeb Widgets site.

Font Awesome Icons

Each of the three items in the row have an icon, heading, text and an optional CTA style link. The link can open internal or external pages and in a new window if required.
The icons are from the Font Awesome range which are very well known and perhaps overused. The widget has a link to Font Awesome to make finding icons easier.

PNG Icons

Each of the three items in the row have an icon, heading, text and an optional CTA style link. The link can open internal or external pages and in a new window if required.
The widget uses PNG images and can be used by those who have their own collection of icons or who design and create their own.

© EverWeb Widgets -