CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Product Card

A selection of product information, used as teasers for further content.

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Product Card component is a card containing essential product information, used as a teaser for the user.

By default, the image size is not set in CSS. It expands to cover the entire width of its parent. If you want all your images to have the same size, you can set a fixed ratio using the .media-wrapper utility class (check the --set-img-ratio demo). This class also prevents the content jump caused by the browser when it loads the image (the class is defined in the base/_util.scss file of the framework).

🌄Image credits:

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us