ThemeKit Animated Hero
Hero image with two column overlay animates an image and text block when in viewport.
Link OptionEverWeb Widgets
![Slide Card [1]](ewExternalFiles/gt-1.jpg)
Auto Grid
LayoutA CSS auto grid layout.
The number of items per row is determined by the <article> max width and the grid max width.
The items are auto aligned to keep them the same height despite varying content.
The links are positioned absolutely at the bottom so that they remain inline.
All the items are optional and are turned on as required using checkboxes.
The staggered, slide up and in animation can occur once or whenever the items enter the viewport and is prevented by default on mobile phones.
Animated Hero
The hero image has an invisible overlay with two columns. One column has an image and the other a text block which animate in when the item is in the viewport. The position of the left/right position of items can be switched.
Images
The image is inserted in three sizes for the various device.
The images in the example were cropped to size and optimised before importing into EverWeb.
The image sizes are 1200 x 720px (43KB), 720 x 480px (25KB) and 9:16 aspect ratio image for phones in portrait mode at 375 x 667px (24KB).
Animation
The items are animated individually with their own controls for animation, time and delay. There is a choice of 15 animation types.
Slide Up Cards
The ThemeKit SlideCards widget creates a grid which uses the min-max property and the auto-fit keyword to automatically adjust the number of items per row depending on the container max-width setting and the item's min-width setting.
Items
The grid items are all optional with a choice of image with alt text, caption, heading, span, text and a link.