Khi xem một feed ảnh hay video, người dùng thường muốn biết thêm về nội dung mà không bị đưa sang trang mới. Media Card giải quyết điều này bằng một tap đơn giản: thông tin xuất hiện ngay bên dưới card, card xoay nhẹ để báo hiệu trạng thái active.

Hành vi

Trạng thái	Mô tả
Default	Card hiển thị media, không có info
Active (tap)	Card xoay 5° theo chiều kim đồng hồ, info fade in phía dưới
Tap card khác	Card cũ reset, card mới active
Tap ra ngoài	Tất cả reset về default

Tại sao xoay?

Rotation là tín hiệu visual rõ ràng nhất để phân biệt card đang active khỏi các card xung quanh — không cần overlay, không cần shadow thêm. Khi một card xoay, các card còn lại tự động dim xuống, tạo focal point tự nhiên.

Góc xoay 5° — đủ để nhận ra sự thay đổi mà không làm layout bị vỡ. Nhỏ hơn thì khó nhận, lớn hơn thì trông playful quá mức.

Dash border

Border dạng nét đứt (dashed) đóng vai trò placeholder: nó không chiếm diện tích visual như solid border, nhưng vẫn xác định rõ boundary của card khi chưa có content. Khi card active và info xuất hiện, border vẫn đứng yên trong khi card-media xoay — tạo hiệu ứng phân tách hai layer.

Khi nào dùng

• Feed ảnh hoặc video dạng masonry / grid
• Người dùng cần scan qua nhiều item trước khi quyết định xem chi tiết
• Không muốn navigate away để xem metadata cơ bản (tag, title, link)

Nếu người dùng cần xem nhiều thông tin hơn (mô tả dài, related items, actions phức tạp), nên dùng modal hoặc expand-in-place thay vì pattern này.