Web Interface  |  Patterns

Cards

This section is about how to make a good card design.

01Spacing system

Good card design starts with building a system of spacing within it and spacing between its elements.

The system always gives quality.

02Heading position

The heading in the card will be disconnected from the meaning if it is separated by an image from the text. It is better to place the heading after the image, to connect it to the text or other main content of the card.

The headline above the image.
The heading below the image.

03Overflow

The fewer elements in a card, the easier it will be to read. Cards with a lot of elements create too much noise individually, and in a group merge into a single noisy lump. In this flow of small elements, the user will not be able to find the main thing.

The simpler the card and the fewer elements it contains, the more effective its role.

A card has a lot of elements.
Less is better.