Flipping Multiple Items

The flip items on the preceding page - article amd image - have a click to show and click again to hide the backface.
When two or more items are inserted in a row or grid the amount of user insteraction required can be reduced a lot by clicking on another item to hide the backface of the previously vieweditem.
Layout
The ThemeKit UI Cardds widget can insert two, three or four items. The items can form a responsive row or be inserted as a 2 x 2 grid by inserting four items and selecting [2] for the number of items.
There are separate controls for adjusting the grid column gap and the row gap.

Cards

The items have …

• An image with alt text & an overlay caption at the bottom
• The images can be switched to lazy loading if not in view at page load.
• The cards have controls for border width, color and radius
• The backfire has a heading, optional styled span, text and an optional link
• Links can be globally switched from opening internal to external pages
• The flip rotation can be on the X or Y-axis
• The hover swing angle on mouse over on computers can be adjusted

Efficiency

Like the other ThemeKit UI widgets the flip items use external, minified stylesheets to reduce the quantity on internal styles.
The Javascript to create the flip action uses a single line of custom code to improve performance on mobile devices.