Product Card

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

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 aspect-ratio utility classes (check the --set-img-ratio demo).

🌄Image credits:

• Photo by Xavier Teo on Unsplash
• Photo by Daniel Storek on Unsplash

Categories

• Content and Layout > Card
• Ecommerce > Card

Bug report & feedback

Component Github page ↗