🃏 Cards are not just for displaying information! Know 20 types of cards used in UX / UI

Card is one of the most popular Component UI because it helps to group data tidy, easy to read and supports Web App, Mobile App and Dashboard.

If you choose to use Card to suit the data type, it will help users find, compare and make decisions faster.

💡 What do users get?

- ✅ Select the card to suit each data type.

- ✅ Design a tidy and beautiful UI.

- ✅ Increased user experience (UX)

- ✅ Instantly apply to Web App, Dashboard and Mobile App

🃏 20 popular card types

1️⃣ Basic Card

Basic Card for Displaying General Information

2️⃣ Image Card

Focus on pictures. Fits Portfolio, Gallery or Blog.

3️⃣ Product Card

Show items such as pictures, prices, reviews and purchase buttons.

4️⃣ Profile Card

User information such as profile image, name, location and contact channel

5️⃣ Dashboard Card (Statistic Card)

Display KPIs, numbers, or key statistics such as sales, users, or revenue.

6️⃣ Feature Card

Describe the features or highlights of the product.

7️⃣ Pricing Card

Displays packages, prices and benefits.

8️⃣ Service Card

Show the services of a company or organization.

9️⃣ Team Card

Introducing Team Members with Position and Brief Information

🔟 Article Card

Display articles with images, categories and publication dates

1️⃣1️⃣ Course Card

Show courses such as instructors, duration and difficulty levels.

1️⃣2️⃣ Game Card

Displays game information such as cover art, game type and play button.

1️⃣3️⃣ Prompt Card

Display Prompt AI with Copy Button and Category

1️⃣4️⃣ Material Card

Display documents such as worksheets, PDFs or teaching materials

1️⃣5️⃣ File Card

Display files with file type, size and download button

1️⃣6️⃣ Notification Card

Show notifications with read time and status

1️⃣7️⃣ Activity Card

Displays recent activities such as file editing, login, or history.

1️⃣8️⃣ Social Card

Show Posts Photo Video with Top Like and Comment

1️⃣9️⃣ Expandable Card

Tap or click to enlarge the page without changing the page.

2️⃣0️⃣ Interactive Card

Both Cards can be pressed. Hover, Ripple and Animation support to increase the fluidity of use.

🎨 UX / UI Best Practice

- Use Visual Hierarchy to sequence data such as Image → Topic → Details → Action button.

- Limit the information in the Card to tighten. Not packed until difficult to read.

- Use the Grid Layout and set the Spacing.

- Designed to support Responsive for both Desktop and Mobile.

- If the card is pressed, Hover, Active and Focus State should be available for users to recognize the interaction.

- Use uniformly proportioned images and icons to make all cards look the same system.

💬 What types of cards do you use most often in your project? What types of cards do you think are interesting and want to use? Let's exchange ideas!

# CreatifyX # UXUI # CardDesign # WebDesign # Dashboard

📌 Follow CreatifyX

Includes AI tools • Digital • Graphic Design • Practical Productivity, updated weekly 🚀