EverWeb Widgets

ThemeKit Sale Grid

Top Item

$250Sale: $199

Image [1] is in column 1 & spans 7 of the 12 column grid.
Text spans 6 columns and its position is adjusted vertically using a slider

Penta Grid

Bottom Item

$350On Sale: $299

Both images are in row 1. Image 2 is gven a percentage top margin to move it down to adjust or clear the overlap.

Sale Grid

Offset Sale Grid

The grid can be used to show off two items with an image and an overlapping text block or used for sale items using the optional sale corner tag and price strike out.
The CSS grid layout has been simplified by placing both items in row 1 and moving the bottom image down by applying a percentage top margin rather than using rows and row span.
Images
The images have an alt text attribute and an option for adding a border. In the above example the top image is positioned in column 1 and spans 7 columns. The bottom one is in column 7 ans also spans 7.
Sale Corner Tag
The optional tag has controls for font size and color and for the background color and its opacity.
Article
The articles are positioned on the X-axis in the same way as the images using column start and column span.
The vertical position is adjusted using a percentage slider for top margin in the case of the top article and bottom margin for the bottom one.
Content
The articles have a heading and text and options for a strike out span, span and a link.
The links are configured to open internal pages and aligned left, center or right.

Strike Out & Sale Price

Sale items are usually accompanied by the normal retail price with a line through followed by the sale price. In this setup both are inserted in spans with controls for font size and color.
Strike Out
The line through the regular price can be inserted using the text-decoration selector with the value of "line-through".
A more professional "strike out" can be inserted using a ::before pseudo element to create the line, position it and rotate it to a suitable angle.