Product Summaries

January 30th, 2017

Working at Create.net, we often have to build new templates using existing markup - it keeps maintenance to a minimum and ensures sites don't get left behind. One afternoon I decided to see how far I could take this 'product summary' pattern, creating three different styles using the same markup.

product summaries

As you will see, I've placed elements in drastically different layouts and positions using nothing other than CSS.

Click the buttons at the top of the demo to switch out the CSS and change its appearance. Don't forget to interactive with them (things appear on hover).

See the Pen kkoBGX by Matt (@gmattgreenfield) on CodePen.