Intro to UI Cards

While cards come in all shapes and sizes, the most basic form is the text card. It’s commonly seen on things like dashboard applications. Text cards consist of a title and secondary text.

However, the only required element in a card is a container. All other elements like text, media, thumbnail, icons, buttons, etc., are optional.^[2]

Rich cards contain a variety of complex information, including images, video, graphics, text, and links that encourage user interaction. It's important to give elements enough space and clearly indicate hierarchy so that it's still easy to scan and comprehend.

An average card may contain different types of media, like an image, a title, a summary, icons, or a CTA button, but they all should present one digestible unit.

User cards are a specialized type of card that has become universal across social platforms. Their primary purpose is to provide basic user information, generally a username and avatar, but may also contain activity status, bio, CTA button (like Follow, Call, or Connect), or other contextual details.

Cards are an excellent solution for grouping together heterogeneous items. Each card can contain different types and amounts of information and, thus, occupies an additional amount of vertical space. Cards may or may not include rich media (the thumbnail image), title, secondary text, hashtags, call-to-action buttons, etc., but they are all associated with one concept.

Card layouts are better for interfaces where users browse information instead of searching. This is because:

• Cards lack a strong hierarchy. All cards are equal and carry the same ranking. When users search, they assume the items on the top of the list are the most relevant.
• Cards are less scannable than lists. Due to their flexible height, the position of elements isn't fixed, which makes them less predictable for human eyes. When people search for a specific item, they need consistency for a more efficient and fast search.
• Cards take more space and thus, require more scrolling. When users search, frequent scrolling demands more mental effort as users need to strain their short-term memory instead of just looking at the page and seeing more items in a single view.^[3]

Flat cards can be more challenging to style, as they resemble physical cards the least. They don't include shadows or outlines to give depth to the design. Therefore, they need some other kind of visual cue, such as a differently colored background than the rest of the page. Consider adding microinteractions to cards or their CTA buttons to indicate their clickability. 

Like elevated cards, outlined cards draw user attention and group items into a single unit. Instead of using shadows to stand out, they use a border stroke to highlight their content. However, outlined cards are flat and don’t encourage user interaction like elevated cards do.

Elevated cards use shadows to stand out from the rest of the page, floating above the background surface. Shadows also help indicate clickability and enhance the unity of elements within one card.

Elevated cards are common in design since they most readily mimic the appearance of a physical card. It's essential to intensify card shadows on hover — it communicates clickability even more and provides users' feedback on their actions.

When adding card shadows, you usually draw inspiration from the real world, using a darker color and playing around with offsets. Make sure the shadow is visible on all four edges for the most realistic and eye-catching look. When you apply only key lights that create sharper, directional shadows, you risk overdoing the card design.^[1]

Regardless of style, information hierarchy within each card is vital. Good hierarchy points users toward the most relevant content within a card first, makes key elements stand out, and guides users to interact. What is the most important element on a card that you want users to notice first? Use color, different fonts, contrast, shape, alignment, orientation, and other visual tools to create information hierarchy.

Padding, which refers to the white space around the card's elements, can also contribute to visual hierarchy. Without sufficient space, cards end up looking cluttered and decrease usability. Padding makes the elements stand out (which is essential for primary buttons) and increases the overall scannability of the card, too, so users spend less time finding what they need. 

Depending on the exact function and content of the card, they may contain several types of actions, most often in the form of buttons or links. Action-based elements need to preserve the card’s visual hierarchy while also being styled in a way that makes the most important actions stand out over any secondary actions.