ThemeKit CTA Hero
Clip-path angled gradient background or hero image with overlay header, text block and animated CTAs.
EverWeb Widgets
Layout
Optional SpanThe container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
Widgets
Items
ContentEach item has an overlay image, a heading, text and an optional link.
The links are positioned at the bottom.
Image
PositionThe text is moved down and the image overlays the top of the text block using some CSS jiggery pokery.
Parallax
Animation
Slide UpThe staggered, slide up and in animation occurs whenever the items enter the viewport.
WidgetsHero Cards
The ThemeKit Hero Cards widget creates a row of 2, 3 or 4 cards which are ideal for introducing staff members to bring the human touch to a web based business.
The cards can be static ur animate up on page load to overlap the item above by a predetermined amount.
When three cards are present the last one centerers itself below the first two at the first breakpoint - usually set for tablets in portrait mode.
Page Items
The cards are used on this page in conjunction with the ThemeKit Logo Heading, the ThemeKit Animated Hero and the ThemeKit Fade In Navigation.
CTA Hero
This is the ThemeKit CTA Hero with an image background rather than a solid color or gradient.
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 (180KB), 720 x 480px (80KB) and 9:16 aspect ratio image for phones in portrait mode at 375 x 667px (49KB).
Markers
There is an option to add link item markers with a choice of 16 types. These have their own controls for size, color and inset.