ThemeKit AUI

Hero Eclipse

This is different take on a hero image. The ThemeKit AUI Hero Eclipse inserts the image in three sizes, has an optional header with a heading and an option for a logo link.
The action tax has an optional bounce animation so that it is easier to see. On click or tap the tab shows the close icon and has a different background color.
Overlay
The overlay has an article with an optional lazy loaded image, a heading, controls for styling spans and an optional internal link that can be aligned left, center or right.
The overlay panel animates in from the left or right, down from the top or up from the bottom.
Images
Like all good responsive hero items the images ar inserted in three sizes. The images used in the demo were optimised and resized before importing into EverWeb.

Large Image: 1200px x 800px
Medium Image: 1720px x480px
Phone portrait Image: 375px x 540px

Editing

When the widget is dragged onto the EverWeb design canvas it shows the overlay for inserting the image and text, the optional CTA (call to action) style link and for adjusting the overlay color and its opacity.
The overlay is then hidden by checking a box and the main images, optional header and the action tab can be set up.

Links

Although horizontal navigation links are good for page navigation they are essential to add relevant links below text content on responsive web pages.
Stylish links can help to define a web page design and make it more memorable to visitors.
The xl AUI links have two distinctive styles - the Transition Links shown above and the Disc Links shown below.
The ThemeKit AUI Transition Links widget has a hover animation sliding in an arrow icon with adjustable transition time in milliseconds.
The ThemeKit Disc Links widget is a bit more elaborate with an arrow icon which rotates on hober.