full · Header, halaman login, dokumen
compact · Ruang sempit yang masih perlu nama
stacked · Sidebar menyempit, kartu, splash
Logo
Logo Waste4Change sebagai satu komponen: tiga susunan, empat pilihan warna, digambar sebagai SVG di dalam halaman.
Untuk logo dengan nama produk seperti Career, Karir, atau Blog, gunakan SubBrand.
Susunan
Tiga susunan dari satu berkas gambar yang sama. Pakai full bila ada ruang, compact bila ruangnya tinggal sebaris, dan stacked bila yang tersisa hanya satu kolom sempit. Ketiganya membawa wordmark, dan itu satu-satunya pilihan yang ada: panduan merek Waste4Change tidak mengizinkan disc berdiri sendiri sebagai logo, jadi komponen ini tidak menyediakannya. Favicon dan ikon aplikasi adalah aset statis, bukan pekerjaan komponen ini.
Warna
Warna brand tidak mengikuti token tema: logo tetap biru dan hijau yang sama di mode terang maupun gelap. Yang berubah hanya pilihannya — auto berganti putih di mode gelap, dan white untuk navigasi navy. Tidak ada pilihan yang mengikuti warna teks sekitarnya, karena warna logo tidak boleh diubah-ubah; blue dan white adalah satu-satunya varian satu-warna yang diizinkan.
original · pasangan brand
auto · ikut mode gelap halaman ini
blue · satu warna primary
white · di atas navigasi navy
Ukuran dan penempatan
Tinggi diatur lewat prop height atau class. Jangan mengatur lebar sendiri; lebar mengikuti proporsi supaya logo tidak gepeng.
Dashboard
Tinggi bawaan 24 px. Class seperti h-7 w-auto menimpa prop height.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| shape | 'full' | 'compact' | 'stacked' | 'full' | Susunan logo: satu baris, dua baris di samping disc, atau dua baris di bawah disc. Ketiganya membawa wordmark — disc tanpa wordmark tidak disediakan. |
| color | 'original' | 'auto' | 'blue' | 'white' | 'original' | Pasangan warna brand, mengikuti mode gelap, satu warna primary, atau putih. Tidak ada pilihan yang mengikuti warna teks: warna logo tidak boleh diubah-ubah. |
| height | number | string | 24 | Tinggi gambar; lebarnya mengikuti proporsi. Class CSS menimpa nilai ini. |
| label | string | 'Waste4Change' | Nama aksesibel. Isi string kosong bila logo hanya hiasan di samping teks yang sudah menyebut nama. |
Atribut lain diteruskan ke elemen svg, termasuk class dan style. Gambarnya ada di dalam halaman, jadi tidak ada permintaan berkas tambahan dan tidak ada kedipan saat halaman dimuat.