Product card

The product card showcases product details in a concise format

Layout configurations

The card has two layout options responsive and static.

The responsive layout switches from a landscape card on mobile, to a portrait card on desktop.

The static layout maintains a portrait card across all screen sizes, this is useful e.g. when including the cards in a carousel.

Responsive with logo

Responsive no logo

Responsive with action button

Static

Static no logo

Content demos

The product card is very versatile and needs to cater for a wide range of different content options.

More than 4 colour options

Grid of cards (responsive layout)

Real content

Mixed content types

Dark mode

Right to left