<>Containers là các vùng chứa nội dung, giúp tổ chức, nhóm và định dạng các thành phần UI. Chúng giúp giao diện trở nên gọn gàng, dễ đọc và dễ điều hướng hơn.
/Các loại Containers phổ biến
📌 1. Card Containers (Thẻ nội dung)
– Thường dùng để hiển thị một đơn vị nội dung độc lập.
Dùng cho:
– Sản phẩm trong e-commerce.
– Bài viết, thông tin người dùng, thông báo.
– Ví dụ: Thẻ sản phẩm trên Shopee/Lazada.
📌 2. Section Containers (Khu vực nội dung lớn)
– Chứa một nhóm nội dung liên quan, thường có header.
Dùng cho:
– Chia giao diện thành các phần như “Giới thiệu”, “Dịch vụ”, “Testimonials”.
– Ví dụ: Các section trên trang landing page.
📌 3. Modal Containers (Cửa sổ pop-up)
– Xuất hiện trên giao diện chính, dùng để hiển thị nội dung quan trọng.
Dùng cho:
– Form đăng nhập, xác nhận xóa dữ liệu.
– Ví dụ: Pop-up yêu cầu đăng nhập trên Facebook.
📌 4. List Containers (Danh sách nội dung)
– Nhóm các mục có định dạng danh sách.
Dùng cho:
– Danh sách bài viết, sản phẩm, tin nhắn.
– Ví dụ: Danh sách bạn bè trên Facebook.
📌 5. Grid Containers (Lưới bố cục)
– Chia nội dung thành các cột và hàng có khoảng cách đều nhau.
Dùng cho:
– Gallery ảnh, dashboard admin.
– Ví dụ: Grid layout trên Pinterest.
/Best Practices khi thiết kế Containers
✅ Giữ sự nhất quán – Các container nên có khoảng cách và padding đồng đều.
✅ Sử dụng độ bo góc hợp lý – Bo góc nhẹ (4px – 8px) giúp UI mềm mại hơn.
✅ Dùng hiệu ứng đổ bóng nhẹ – Giúp phân tách container với nền mà không quá nổi bật.
✅ Ưu tiên khoảng trắng thay vì viền dày – Giúp giao diện thoáng hơn.
