The layout is created using the CSS Grid Layout Module, centered with a max width and adjustable grid row gap for separating the items.
Each item is an HTML5 <article> with a round image, a heading, optional <hr> element for a separator, text and an optional link icon with an animated tooltip.
The square image is given a border radius of 50% to make it round and is floated left to allow the text to wrap.
The CSS shape-outside property is set to a value of "circle()" to allow the text to follow the curve of the image.
The images in the demo were cropped to 120px square and optimised before importing into EverWeb.
The image has controls to set the width for computer and tablets and for mobile phones. The image can have a border and/or a box shadow.
The line below the heading emphasises the break between ithe heading and the text content.
The line is created using a CSS ::after selector so that the line maintains the width of the text and inherits its color.
To keep the layout compact the links are inserted as a disc with an arrow icon at the top right.
The arrow is styled using ::before and ::after pseudo-selectors for maximum code efficiency so the arrow color and the link background can be styled.
The tooltips are animated using CSS3 transforms rather than Javascript for better efficiency. Their position in hover/tap is change using translate-X and scale-X along with transition times for show and hide.
The tooltip shares the link color and background color controls and has a control for font size.
On touch screen mobile devices the link tooltip has a double tap function. Tapping the link icon opens the tooltip and tapping again activates the link.
When tapping anywhere else on the device's screen any open tooltip will close.