Affiliate & Sponsor Links

The grid can have up to 48 items. The cards are created using JPG images inserted in a circular container which appear on the front face along with the optional caption.
The number of cards per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone.
Images
The images should be cropped to size before importing into EverWeb. The images used here are 360px x 240px.
Captions
The captions are optional and have controls for setting the font size, color and the background color and its opacity.
Back Face
This has a heading, text and an optional CTA style link tab.
The content is centered horizontally and vertically.
Links
The optional links are configured by entering a relative file path for internal links and an absolute file path for external links. Click the link below to find out more about absolute and relative file paths. The links can open in a new window if required.
Cards
The cards can have a border and/or a box shadow and horizontal and vertical spacing between them can be adjusted with one control using the grid-gap property. The outer padding is adjusted using CSS calc to be 50% of the grid gap setting.
Animation
When viewed on computers there is an optional 20° transition animation on hover to give an indication that they can be flipped. The cursor type has been set to "alias" which is a curved arrow.
On mobile devices, a curved arrow icon appears at the top right. There is a checkbox to show it on computers too.
Since an SVG is used for the icon, the arrow color can be adjusted.
Flip
The flip direction can be set to occur on the X-axis or Y-axis. The on hover animation inherits the axis setting. The animation time is set in milliseconds.