Adjusting information inside a card visually

by Sheraz   Last Updated July 11, 2019 09:16 AM - source


Currently, I'm working on Product Listing page of a web-store. Products shown on the web-store can basically be rented out and we have defined rental prices for different time duration such as monthly price, weekly, daily, per hour, per minute. If the store owner has setup all of these prices, then we need to show them all in the product card.

Current Card looks like this:

enter image description here

As I am involved in the redesigning of the web-store, I wanted to change the look and feel of the product cards so that more cards can be fit in one row and information can be displayed properly when it comes to visuals.

Here is what I have mocked:

enter image description here


In the redesigned mock-up, we can see that only the first three price breakdowns are visible. I want to show rental prices which are per hour and per minute. For that I need extra horizontal space.

What I had in mind was to introduce a carousel inside the card in the prices section which can be used to view the remaining two prices. Will that be a good ux pattern?

Something like this:

enter image description here

Let me know what you think of this ux pattern and any alternatives that we could introduce for such case. Thanks !!

Related Questions

Spacing between two tiles for good readability?

Updated July 25, 2015 13:07 PM

Card Design - Layout

Updated January 10, 2019 22:16 PM