Responsive Grid Row Info Cards

Info Card Grid

Item [1]

Grid Items

Each item displays an ice, heading and action button on page load.

Badges
Info Card Grid

Item [2]

Action Button

The action button can be styled for background color, chevron color and hover color.

Slide Up
Action Button Drop Down

Itme [3]

Title/Date

The field for title/date can be styled for font size, color and text align.

Ionicons
Info Card Gris

Item [4]

Grid

The grid can hold up to 48 items and the number of items per row can be set for each device type.

Icon Cards
Responsive Grid

Item [5]

Grid Layout

The grid has controls for adjusting the maximum width, top/bottom and left/right padding and the grid gap which adjusts the item spacing.

Shuffle Cards
Links

Item [6]

Links

The optional CTA style link can be configured to open internal or external pages with a new window option.

Flip Catds

Info Cards

The grid can hold from 2 to 48 items and the number of items per row is adjustable for each device type - computer, tablet landscape, tablet portrait and mobile phone.
Each card shows an image, heading and action button on page load. On click, the title/date, info text and optional CTA style link are revealed. Opening another item will close the previously opened one.
Images
For a uniform grid, all the images should be cropped to the same size and aspect ratio before importing into EverWeb. The images don't need to be any wider than about 400px.
Heading & Button
The item heading is aligned left and can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The button has controls for adjusting the chevron icon color, hover color and the background color. The chevron is created using CSS so there is no image to download and it switches from down to up on click by changing its angle using the CSS transform property.
Hidden Content
The title/date has controls for font size, color and text align. The text has controls for font size, line height and text align.
The widget Assets List has a checkbox for showing the hidden content for each item while adding or editing it.
NOTE: The box can be left checked if the item is required to be open on page load.
Links
The links are optional and can be internal by entering a relative file path or external by entering an absolute file path. The tab can be styled for font size, color, hover color, background color and border radius.
Grid Items
The grid items have controls for setting the background color and its opacity and for adding a border and/or a box shadow if required.
Grid
The grid has controls for setting the maximum width, left/right and top/bottom padding, grid gap (item spacing) and the background color and its opacity.
Wrapper
The full width wrapper has controls for setting its background color and opacity and to adjust the spacing from the items above and below.

© EverWeb Widgets -