Icon 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 show 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.
Ionicon & Font Awesome Icons
The widgets for creating Ionicon and Font Awesome cards have a help button which launches the relevant cheatsheet for each icon type. The Ionicon cheatsheet is hosted on this website and has a search field for quickly finding icons using keywords.
PNG Image Icons
The icons should all be the same size and can be either rectangular or round. The images used in this demo were created in Keynote and then cropped to 128px square. They were then launched in Preview to make them round PNGs by removing the background. The size allows them to be displayed at up to 64px and have retina quality.
The icons have controls for setting their size, padding and background color. The padding allows the background to show outsize of the image.
There are controls for adding a border, border radius, box shadow and shadow color.
The container is set up for square/rectangular icons by default. There is a checkbox for round icons so that the border and box shadow follows the image's outline.
The icons in the demo have 3px of padding to show the white background, a 1px grey border and a mid grey box shadow with an 8px shadow radius.
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.