Toggle Info Grid

CSS Grid

An image grid with a slide down info overlay on click or tap.

Item Spacing

The grid item spacing is easily adjusted using the grid-gap property.

Overlay

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

Overlay Contents

The overlay is contained in an HTML5 <article> element. It has an h1 heading, a paragraph and an optional link with adjustable vertical spacing.

Links

The link can be configured to open internal or external pages and in a new window if required.

Open or Closed

Any overlay can be open on page load if required.

Data

Open/Close Overlay

Each grid item has a chevron down icon at the upper right. When clicked or tapped, an info overlay slides down. The overlay has a heading, paragraph and an optional link.
The overlay can be open in EverWeb when the content is being added, Any overlay can also be set to be open on page load as can be seen from item 6 above.
Links
The links can be turned on individually and can be configured to open internal or external pages and in a new window if required. They share the same color as the text and have a hover option which is shared by the chevron tab.
Spacing & Styling
Items in a CSS Grid layout are separated using the "gap" property. Gap applies to the spacing of both columns and rows. If more control is required, the "grid-column-gap" and the "grid-row-gap" properties can be used.
The grid can be moved away from the browser/device window edges using left/right padding.
The items have controls for border width, color and radius and box shadow color and radius.