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

All Projects


Container of 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 card component is a container of information (e.g., preview image, title and description) used as teasers for further content. It's generally displayed in a gallery of related items.

To prevent the content "jump" caused by the image being loaded, you can apply the .card__img--no-jump class to the <figure> element. In SCSS, make sure the padding-bottom value is equal to the image ratio (height/width*100).

Bug Report & Feedback

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

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.