Responsive News Item Grid
The grid uses the EverWeb widget API Assets List to add items so it can have up to one hundred entries and their can be rearranged by draging them around in the list. This makes it suitable for listing latest news items with the most recent at the top. It can also be used for a blog or podcast entries list, a products list or an info navigation.
Each grid item has an image with alt text and an aside element with an optional date field, heading , text and an optional CTA style link which can be configured to link to internal or external pages or files.
The items in the aside element are vertically centerd. To allow for varying amounts of text content, the height of the aside element is kept equal in each case using the jQuery matchHeight plugin. This allows the grid to remain even when the aside slides down below the image when viewed on narrower device screens .
When the item is viewed on a computer, two grid items sit side by side and the aside positions itself to the right of the figure element containgin the image.
When viewed on an iPad the pairs are still positioned side by side but the aside element positions itslef beneath the image.
On mobile phones in portrait mode, the aside remains below the image and the right hand grid item slides down below the left on.
If viewing this page on a computer, reduce the browser width to see this. Use the browser's responsive mode to see how the layout looks on different devices.