EverWeb Widgets

Slide Up In Viewport [2]

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".
The links are absolutely positioned at the bottom to get then to line up horizontally. When links are present, a fixed amount of bottom padding is added to accommodate them.

Personal Sponsor

£100 over 3 years

Your name on our website with a photo
he right to display the sponsor logo on your website and letterhead
Your name and comments in our quarterly newsletter distribution

Contact

Company Sponsor

£500 annually over three years

Your company logo, profile and contact details on out website with link to your website
The right to display our logo on your website and company literature
Your company advertisement in our quarterly newsletter distribution
Your company advertisement on our website's Sponsors News page

More Info

Corporate

£1000 annually over three years

Your corporate logo on our homepage
Your corporate logo, profile and contact details on our website with link to your website
The right to display our logo on your website and corporate literature
Your corporate advertisement in our quarterly newsletter distribution
Your company advertisement on our website's Sponsors News page
Sharing of your (relevant) company information across our social media channels

List Cards

Each item has a heading, a paragraph, a styled list and optional link. As can be seen from the example, each card can have a different font color and background color and the cards can be styled with a border and/or a box shadow.
Since it is a grid layout, the item spacing can be adjusted using the grid-gap property and there are controls for adjusting the vertical spacing and adding left/right padding.
List
The list in each card can have between 3 and 8 list items. There are controls for font size, item spacing, line height and inset.
The list style can be selected from …
disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha, & upper-alpha

Grid Items

Price/Date

Each item is an HTML5 article with a <figure>, an image, a <figcaption>, heading, paragraph and link.

Slide Up [1]

Options

All the items are optional and are turned on as required using checkboxes.
The links are positioned absolutely at the bottom so that they remain inline.

Slide Up [3]

Animation

The staggered, slide up and in animation occurs whenever the items enter the viewport.
The items are auto aligned to keep them the same height despite varying content.

Slide Up [4]

Images

This layout has a lot of options. The images, captions, text and link can all be turned on/off using checkboxes. The optional text field can be used for price, date etc and the links can open internal or external pages with a new window option.
The images can extend to the edges or have a margin added to pad them inwards to line up with the text.
The grid gap control adjusts the spacing between the columns and rows. There are controls for adjusting the horizontal spacing from the browser egdes and vertical spacing from the items above and below.

Columns

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 Point

At the first break point - user selectable - there are two columns and two rows.
The first two items are placed in row 1 with 100% width. The third item is placed in row 2 and centered. Its width is set to 50% and it spans columns 1 and 2.
On mobile phones in portrait mode, the items each occupy a row of their own.

Slide Up [3]

Auto Align

Note that all the items in a row adopt an equal height despite varying amounts of content. This is achieved by setting the align-self property to "auto" rather than having to use javascript.
The CSS Grid layout is far more efficient and flexible than using systems like Bootstrap.

Slide Up [4]

Text

Each item has a heading, optional text field, text and an optional link.
The optional text field can be used for price, date etc and the links can open internal or external pages and open in a new window if required.
As can be seen from the above example, each item can have a different font color and background color. There are controls for border width color and radius and box shadow color and radius.
The grid gap control adjusts the spacing between the columns and rows. There are controls for adjusting the horizontal spacing from the browser egdes and vertical spacing from the items above and below.