EverWeb Widgets

Slide Up In Viewport [3]

Staggered Animation

These widgets create three inline modules when viewed on wider screens and collapse to two plus one and then a vertical stack on mobile devices.
The optional slide up and in animation occurs when the item enteres the viewport. The items have the same animation time but are each given a slightly different delay time.
The animation can be turned on last. This allows the item can be seen on the EverWeb design canvas for setting it up.
Equal Heights
The items maintain equal height despite having varying amounts of content by setting the align-self property to "auto".

CSS Grid

Slide down info overlay on click or tap.
Opening another closes the previously opened one.

Slide Up [1]

Trigger

The overlay is triggered by clicking the chevron down icon which changes to chevron up when the overlay is open.

Slide Up [2]

Animation

The optional slide up when in viewport animation has adjustable time in milliseconds and preset staggered delay.

Slide Up [4]

Info Overlay

The overlay has adjustable background color and opacity and slides down on clicking or tapping the chevron down icon.
The overlay has a heading, text and optional link. The link can open internal or external pages with a new window option and can be aligned left, center or right.
When an overlay is open, clicking another one's tab will close it. The chevron icon tab has controls for color, hover color and background color and its opacity.

Layout

Info

The columns are created using the CSS Grid Layout Module. At wide browser/device widths there are 3 columns and one row.
Each item has a heading, optional price/date field, text and an optional link which can open internal or external pages with a new window option.

Slide Up [1]

Break Points

At the first break point the layout changes with items 1 and 2 remaining in row 1 while the third item is centered in row 2.
On mobile phones, the items stack one above the other .

Slide Up [2]

Animation

The optional animation causes the items to slide up as they enter the viewport.
The items share the same animation time but have different values for animation delay.

Slide Up [4]

Ionicon Icons

The Ionicon range of icons are less over used and abused than the better known Font Awesome icons. They have a more professional design and include a sections of iOS and Android style icons.
The widget has a control for opening the Ionicon cheatsheet which has a search function and easy to copy icon codes.

Layout

Info

The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the heights equal by stretching each item to the same height as the tallest one in any row.

Slide Up [1]

Items

Images

Each item has a PNG image, heading, optional price/date file, text and an optional link.
The image has controls for border with, color and radius and box shadow color and radius.
There is a checkbox for applying the border/box shadow to a round image.

Slide Up [2]

Animation

The optional animation causes the items to slide up as they enter the viewport. The items share the same animation time but have different values for animation delay.
Note that this animation occurs every time the item enters the viewport

Slide Up [4]

PNG Icons

This version of the slide up widget is for those who want to insert their own custom icons or PNG images. The images can be square or round. Their position relative to the top can be adjusted and there are controls for adding a border and/or a box shadow.
Each item can have a different font color and background color if required.