Container

Definisi

Container adalah elemen dasar dalam tata letak UI yang berfungsi sebagai wadah untuk mengatur, membatasi, dan memberi struktur pada konten. Komponen ini membantu menjaga konsistensi desain, mengontrol ruang, serta mendukung fleksibilitas tampilan di berbagai ukuran layar.

Jenis dan variasi

• Fluid Container
  Mengikuti lebar penuh layar (100%), cocok untuk elemen yang perlu menyesuaikan seluruh viewport. Jenis container ini jarang digunakan dan hanya cocok digunakan untuk gambar atau video full-screen.

• Fixed-width Container
  Memiliki lebar pasti yang ditentukan (misalnya 400px), sering digunakan untuk bagian dalam komponen, bukan container utama dalam sebuah halaman.

• Responsive Container
  Memiliki lebar yang menyesuaikan dengan breakpoint (misalnya mobile, tablet, desktop). Memiliki lebar maksimum yang ditentukan (misalnya 1200px), sering digunakan untuk menjaga keterbacaan konten.

Behaviors

• Pengaturan alignment
  Container dapat mengatur posisi konten di dalamnya (misalnya center, left, right, atau flex/grid alignment).

• Responsif secara otomatis
  Container harus menyesuaikan ukuran sesuai viewport, terutama ketika menggunakan layout berbasis grid atau flexbox.

• Overflow handling
  Jika konten lebih besar dari container, perlu ditentukan apakah konten akan dipotong (overflow: hidden), di-scroll (overflow: auto), atau ditampilkan penuh.

Panduan penggunaan

• Gunakan Container untuk struktur tata letak utama
  Membantu menjaga konsistensi desain antar halaman.

• Batasi lebar untuk keterbacaan
  Terutama untuk teks panjang, gunakan container dengan lebar maksimum agar tidak melebar terlalu jauh di layar besar.

• Gunakan spacing internal (padding)
  Agar konten di dalam container tidak menempel langsung ke batasnya.

• Konsisten dalam penggunaan grid system
  Jika menggunakan grid (misalnya 12 kolom), pastikan container menjadi dasar grid.

Aksesibilitas

• Berikan Spesifikasi Container Jika Memungkinkan
  Pastikan container memiliki peran semantik yang sesuai, misalnya <section>, <main>, <article> daripada hanya <div>, jika memang memiliki makna konten.
• Role & landmark
  Jika container digunakan untuk area utama, pertimbangkan menggunakan landmark role seperti role="main" atau role="region".
• Jangan menambahkan atribut ARIA yang tidak perlu
  Container sebaiknya tidak membebani screen reader kecuali benar-benar penting.

Responsiveness

• Mobile-first design
  Mulailah dengan container yang fleksibel di layar kecil, lalu tingkatkan ke layout kompleks di layar lebih besar.

• Breakpoint adaptif
  Container dapat memiliki ukuran berbeda pada breakpoint (misalnya max-width: 600px untuk mobile, max-width: 1200px untuk desktop).