Responsive Grid Module

This type of price comparison module is very common on websites selling software and/or services with different items and price.
Layout
Each item is a column in a grid so the relative heights are maintained with varying amounts of content lines. The individual items can be spaced out horizontally when viewed on computers and tablets using the colum gap selector and vertically when viewed on phones using the row gap selctor.
Content
There are options for a heading, text block, price span, another text block and a link tab. Each of these are turned on using checkboxes. The price has the option to have a contrasting background and font color.
The link tabs can also have a contrasting background and color and also have a control for border radius.
The links can be configured to open internal or external pages and in a new window if required.
The item background color has an opacity slider and there are controls for border width, color and radius.
Scale
The center item can be scaled up by checking a box. It has a higher z-index than the other items so that it can overlap them. The container top/bottom padding can be adjusted to allow for this increase in height.
Container
The container background color can be set and there are controls for adjusting the opacity, setting the maximum width and adjusting the vertical spacing in relation to the items above and below.

EverWeb Widgets

Responsive Grid Module - Price Comparison

Basic

Plus

Professional

Responsive Grid Module

Wrapper