Responsive Cards

Cards are a basic item in a responsive web page and normally show two, three or four items.
Cards should have the following features …

• Use the HTML5 <article> element for the container
• Have the option to show an image or an SVG icon
• Images should be optimised and have a lazy loading function
• Mobile compatible touch links
• Extra styling functions to create a unique appearance

Layout

Using the CSS Grid Layout Module to create items like responsive cards and grids allows the spacing to be easily adjusted using the grid-gap property and creates the item with the minimum of code.
The EverWeb responsive row uses the older style Flexbox layout which is not the best way for creating both columns and rows and is much less efficient.

Icons

Professional website designs now use SVG icons. They are more efficient and better quality than font icons such as Font Awesome.
PNG icons are outdated and inefficienr and should be avoided if possible.
All the EverWeb ThemeKit themes and widget packs includde a download link for 100s of SVG icons.
Inserting SVG
To insert and SVG icon in a widget …

• Open the SVG download folder and find the icon
• SVGs can be opened in TextEdit.app in plain text mode or a code editor
• Copy the code and paste it into the widget settings

CotEditor is a free app available from the Apple App Store which is really usefull for opening SVGs to copy the code or for more advanced users to edit the file.