Cards are these little UI components we see everywhere and the reason is simple, they take really little space and show you enough information and usually 1-2 options you can choose from. So let’s unfold the designs of cards.

Why cards?

  • Cards are here to stay, because of their simple design and good usability cards will continue to increase in popularity.
  • They serve as entry points to more detailed information.
  • Cards are also visually pleasing since on most cards the image of the card is what gives style into it.
  • They are already responsive for web and mobile view.
  • No Icebreaking, Cards are everywhere so users are really familiar with them.
  • They keep the interface organized and they are really minimalistic.

1. Understand the structure

Cards represent physical cards. They act as the container, grouping the information inside.

2. Shadow / Stroke

A shadow or stroke helps to indicate a card, what you decide to go with depends on the style of the UI.

3. Background

The good thing about cards is that you can play around with the background as long as you don’t create a lot of contrast.

4. Text size and weight

Users read more when the font is smaller, and scan more when the font is larger. Wrong font weights used incorrectly can impact usability and aesthetics.

5. Contrast

Cards are really minimal, so contrast plays a major role dividing the information and giving priorities.

6. Buttons

You can use normal buttons, text buttons or icons, on vertical cards buttons, are usually placed on the bottom, on horizontal cards on the right or bottom.

7. Spacing & Padding

Include appropriate padding between focus-able elements also enough spacing to group the informal inside


8. Focus and hover

To make the cards more noticable on hover a darker shadow or a small elevation is usually used.

So that’s it for Card Design. Explore more blogs and level up your Design skills. Thanks you so much @the.dsgnr for this amazing post for Design community. go check him out.