I have a question in terms of the card design style as I was designing the website for a company.

Basically, I noticed that other company's websites apply card design on their website. Like to display their "Key Features" or "Integration" or "Blog" in card design etc, but some just showing it in a flat style (without boxing). See examples below. enter image description here

enter image description here

enter image description here

enter image description here

So my question is when or what is the best practice to apply the card design in webpage?

what if im designing a website that needs to show all those different sections, in which scenario i should apply card design style?

Thank you!

  • 1
    This question is too open to opinion. Cards are a great way of "chunking" your content but how you use them is really down to how your audience perceives and understands the chunks. There is no real "Best Practice" for this other than testing. – Andrew Martin Oct 8 at 7:45

Card UI element is used to emphasis the content and also useful for grouping it together. Eg ; picture, content, CTA, Timestamp.

It also promotes to make the user click to view more details about it.

We can also use this style to align it flexibly. Eg : Pinterest.

Another thing to consider that the content / description / Title characters should be fixed. Otherwise, aesthetically it won't be pleasing, character limit will break in-between and look ugly.

Hope the information is useful!


What I understand from your observation is that, as any other design element, we have to look at them as a whole.

As @sanjai is saying, it is used to emphasis some content, but if you were using the same card design in all the page it wouldn't emphasis anything.

So, answering you question:

I would use the card design as if they were bullets:

  • To list traits.
  • To synthesis other contents.
  • As a navigation system.

Hope it helps :)
