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.

full · Header, halaman login, dokumen

compact · Ruang sempit yang masih perlu nama

stacked · Sidebar menyempit, kartu, splash

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

PropTipeDefaultKeterangan
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.
heightnumber | string24Tinggi gambar; lebarnya mengikuti proporsi. Class CSS menimpa nilai ini.
labelstring'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.