Drop Box Info Grid
Add a lot of info in a compact space and allow visitors to interact with the web page to view content.
iEverWeb Widgets
Grid
Layout
This is a three column grid which reduces to two columns on tablets and one on mobile phones.
If viewing this page on a computer, reduce the browser width to see the change in layout.
Items
Blocks
Each item is an HTML5 <article> with a header and a body. The head is the trigger and the body holds the content.
Items can be spaced using the "grid-column-gap" and "grid-row-gap" properties.
Header
Trigger
The header is an h1 heading aligned left with a chevron icon to the right. The header acts as the trigger to show/hide the content.
ShuffleIcons
Animation
The icon is created using CSS and is flipped when the body is open using transform rotate through 180°.
The up and down orientation can have different colors.
Click Function
Action
The open/close action uses a jQuery plugin which closes any already opened item when another one is selected to open.
Hero ScaleLinks & Spans
Optional Links
The links can open internal or external pages and in a new window if required.
They can be aligned left, center or right.
Span
Span tags can be inserted and styled for font size and color.
Dropbox Grid
Open/Close Overlay
Each grid item has a header with a heading and a chevron down icon. When the header is clicked or tapped, the content is revealed and the icon switches to a chevron up. When an item is opened, a previously opened one will close.
Content
The content has a heading, text block and optional CTA style link. As can be seen from the example, the font can be Google hosted with a web safe fallback if required.
Spans can be used and styled for font size and color. Follow the link below to find out about spans and how to use them.
Links
The links can open internal or external pages and in a new window if required. There are controls for font size, color, hover color, background color and border radius The links can be aligned left, center or right.
Follow the link below to find out about creating internal and external links using relative and absolute file paths.
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.