Apa Nama Kotak Display? Ini Penjelasan Lengkapnya

Kotak display adalah istilah umum dalam bahasa Indonesia yang punya dua padanan tergantung konteksnya. Dalam ritel, ia disebut display case atau kas display, yaitu wadah transparan untuk memamerkan produk. Dalam desain web, padanannya adalah UI card atau block box, elemen HTML yang dirender sebagai persegi panjang oleh CSS untuk mengelompokkan konten.

Pilihan istilah bukan soal benar atau salah. Ini soal konteks: sedang membicarakan etalase toko, atau sedang ngobrol soal layout halaman web? Keduanya punya sejarah, fungsi, dan karakteristik teknis yang berbeda.

Artikel ini akan memetakan kedua konteks itu. Anda akan dapat penjelasan tentang display case fisik beserta materialnya, dan tentang block box digital lengkap dengan varian CSS-nya.

Kotak Display di Dunia Retail: Display Case

Lewat etalase toko perhiasan sampai lemari kaca museum, kita melihat display case bekerja. Ini wadah transparan yang dirancang untuk memamerkan produk sekaligus melindunginya. Benda ini sudah berevolusi dari lemari kayu sederhana di abad ke-19 menjadi enclosure kaca dan akrilik modern yang mengintegrasikan pencahayaan LED, dan pilihan produknya bisa Anda eksplorasi di sdisplay.co.id.

Dua material paling umum untuk display case adalah kaca tempered dan akrilik. Kaca tempered tahan gores dan memberikan kesan premium. Akrilik lebih ringan, tidak mudah pecah, dan sering dipilih untuk area berisiko tinggi atau produk anak-anak. Untuk perhiasan, praktik umumnya adalah melapisi interior dengan kain beludru agar produk tampil menonjol dari latar belakang.

Fungsi utamanya: melindungi barang dari debu dan pencurian, sekaligus meningkatkan nilai jual lewat presentasi. Pencahayaan biasanya dipasang pada sudut 30 sampai 45 derajat untuk mengurangi silau pada kaca dan menonjolkan tekstur produk, bukan lampu langsung dari atas yang membuat barang terlihat datar.

Kotak Display di Dunia Digital: UI Card dan Block Box

Di dunia web, kotak display bukan benda fisik melainkan elemen kode. Ia dimulai dari tag HTML seperti <div>, <article>, atau <section> yang kemudian dirender browser menjadi persegi panjang melalui CSS. Setiap elemen pada dasarnya adalah sebuah kotak yang mengikuti aturan box model, yaitu content, padding, border, dan margin. Anda bisa mempelajari aturannya lebih lanjut di panduan box model web.dev.

UI card adalah varian spesifik dari kotak digital ini. Berbeda dari block box polos, UI card punya gaya khas: border tipis, padding 20 piksel, sudut melengkung dengan border-radius 8 piksel, dan box-shadow seperti 0 4px 6px rgba(0,0,0,0.1) untuk menciptakan ilusi terangkat dari layar. Pola ini naik popularitas antara 2010 sampai 2014 lewat Pinterest dan Google Material Design, sebagian karena cocok untuk tantangan responsive design saat konten harus tampil baik di ponsel maupun desktop.

Contoh nyatanya ada di mana-mana. Kartu produk Amazon menggabungkan gambar, judul, harga, dan tombol dalam satu kotak mandiri. Tweet di Twitter tampil sebagai unit vertikal dengan border halus. Kartu berita di portal media mengelompokkan headline, ringkasan, dan tanggal publikasi dalam satu container. Semuanya adalah implementasi berbeda dari konsep kotak display digital, seperti yang dirangkum dalam dokumentasi komponen cards Material Design.

Tiga Jenis Display Box Digital Berdasarkan CSS Display

Memahami perbedaan ketiga jenis ini menentukan apakah layout web Anda akan rapi atau berantakan.

Block Box

Block box adalah tipe paling dasar. Default value display pada elemen <div> adalah block: ia mengambil 100 persen lebar parent dan selalu memulai baris baru.

Inline-Block

Inline-block menggabungkan sifat block dan inline. Ia mengalir berdampingan seperti teks, tapi bisa diatur width dan height-nya seperti block. Perbandingan singkatnya:

• Inline: mengabaikan width dan height, mengalir menyatu dengan teks di sekitarnya.
• Inline-block: menerima width dan height, tetap bisa diatur dimensinya secara eksplisit.

Masalah klasik pada inline-block adalah jarak misterius antar elemen. Penyebabnya biasanya whitespace di kode HTML, seperti newline antar tag, yang dirender browser sebagai karakter spasi kecil.

UI Card

UI card adalah evolusi modern dari block box yang berdiri sendiri sebagai unit konten modular. Ia menggabungkan border-radius untuk sudut lembut, padding internal untuk ruang bernapas, dan box-shadow untuk mengangkat kartu dari background. Kartu produk di marketplace dan tweet di timeline media sosial adalah contoh paling mudah dikenali, dan detail properti CSS display-nya bisa Anda cek di referensi MDN untuk properti display.

Cara Membuat Display Box yang Tepat dan Efisien

Tiga jebakan klasik sering menimpa developer pemula. Pertama, pasang box-sizing: border-box di awal stylesheet global agar border dan padding tidak menambah ukuran kotak secara tak terduga. Kedua, untuk menengahkan box secara horizontal, gunakan margin: 0 auto dengan width tetap, atau lebih modern lagi, bungkus parent dengan Flexbox dan pasang justify-content: center. Ketiga, waspadalah terhadap margin collapsing pada block box vertikal: margin atas dan bawah antara dua elemen yang bersebelahan akan saling melebur menjadi satu nilai, sering kali lebih kecil dari yang Anda inginkan. Solusinya, gunakan margin-top saja di salah satu sisi, atau bungkus elemen dalam container dengan overflow: hidden.

Pilih Nama yang Tepat Sesuai Konteks Proyek Anda

Jadi, jawaban untuk pertanyaan “apa nama kotak display” ditentukan oleh konteks. Untuk ritel, gunakan display case atau kas display. Untuk pengembangan web, gunakan UI card atau block box sesuai kebutuhan layout.

Langkah pertama yang paling jelas: tentukan dulu apakah proyek Anda bicara soal etalase fisik atau antarmuka digital, baru pilih istilah dan pendekatannya. Kedua konteks itu tidak saling menggantikan, masing-masing punya ekosistem tools dan istilah sendiri. Untuk eksplorasi opsi display case fisik, Sdisplay adalah salah satu sumber yang punya banyak variasi material dan desain untuk dibandingkan.