EverWeb Widgets

ThemeKit Sale Grid

ThemeKit Grid Sale
SALE

Sale Grid

$150Sale Price: $125

A short description of the item on sale with a link for more info or to purchase.

Info

Sale Grid

This is a 12 column CSS grid layout with an image in an HTNL5 <figure> and an <article> with the texxt content. Each item is positioned on the X-axis by defining its column number and column span.
Image
The image has an alt text attribute and an option for adding a border. In the above example it is positioned in column 1 and spans 7 columns.
Sale Corner Tag
The optional tag has controls for font size and color and for the background color and its opacity.
Article
The article is positioned on the X-axis in the same way as the image. In this case it is positioned in column 7 so that it overlaps the image and spans 6 columns.
The article position has a control for aligning it at the top, center or bottom of the container and controls for top/bottom and left/right margin for fine adjustment.
In this case the article is aligned at the top and has a top margin value of 120px to move it down and a right margin of 20px to inset it from the edge of the container.
Content
The article has a heading and text and options for a strike out span, span and a link.
The link is 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.