Clipped text area with heading, styled span and text.
Images with alt text and lazy loading option.
Adjustable clip angle with text vertical positioning control.
Styled span for price/date with controls for font size, color and text align.
Animated link icon appears at the top right when selected.
Border and or bottom box shadow & adjustable column gap and row gap.
A grid like this makes a refreding changie from the usual rows of generic cards/boxes and adds a touch of style to the layout.
The text block has a variable clip angle at the top and the heading can be moved up into the clipped area using the vertical adjust control.
The ThemeKit Grid Icon Nav creates a grid with navigation links. Checking a box adds the function to insert SVG icons.
The auto grid is created without using media queries using the min-max keyword and the auto-fill property. The number of links per row depends on the value for link min width and the grid max width setting or the browser/device window width.
SVG icon are used to replace font icons and/or PNG image icons. They have better quality and are more efficient than Font Awesome.
PNG icons should be avoided at all costs on a reponsive website. Their file size about 20 times greater than an SVG and each one creates an extra serverrequest.
Inserting SVGs
Open the "Read me first" file in the widgt download folder. Click the link to download 100s of free icons.
Double click the icon to open it in TextEdit.app in plain text mode or open it in a code editor.
Copy the code and paste it into the box in the widget settings.
Mac users can download an excellent free editor app using the link below …
MENU