AUI Info Grid

Grid Layout
The grid is centered with a maximum width setting and has controls for column gap and row gap. The auto grid calculates the number of items per rowfrom the grid width and the griditem's min width value.
In EverWeb
The overlay is in view for editing and styling and is hidden to reveal the inage, action icon and optional caption.
Captions
The optional captions share the action icon's color and background.
Action
The overlay is activated when the image is clicked/tapped. It will close when clicking anywgere off the text content, the optional link and another item.
Links
The links can be configured globally to open internal or external pages. The have individual link text but can be switched to common text if required.

Styles

The items have controls for border widt, color and radius and a checkbox to remove the bottom border when the optional bottom box shadow is present.
The container can have a solid color or two color gradient background and has controlfor top. left/right and bottom spacing. Bottom spacing is increased when the box shadow is present.

AUI Note

The AUI Note widget flies in with a unique animation on page load after a preset delay. Since it is a fixed item it can be insert below the footer widget on the EverWeb design canvas.
Content
The note has the option to insert an image with alt text and a lazy load function which should be used since the item is not in view in page load if it has a delay set.
There is a heading, text, controls for styling spans and an optional internal link with a hover animation.
The close tab at the top right has controls for icon color, background color and its opacity and for the fade out time in milliseconds.
Animation
The custom animation is designed to be unique and grab attention. It has controls for the animation time and delay set in seconds.

Navigation

The navigation for responsive pages should always be vertical and appear in the center of the viewport.
The old style horizontal menu with dropdowns has proved to be very inefficient at getting visitors to click through to other pages of the website.
On large websites with directories use an image navigation for browsing to sections.

AUI Navigation Menu

The action tab has an animated icon and text and can be inserted at the top left or irght with a fixed position.
The menu is centered in an overlay which drops down from the top.
The links can be space out and have a max width setting. They have a background hover animation and the current page link can be indicated by a different background color.
When viewd on computers the links can have a scale on hover animation which may require an increase in max width.
When the number of links excedes the browser/viewing devices viewport height any overflow will scale into view.
For a selection of navigation widgets suitable for responsive websites follow the link below …