Komponen Kartu & Panel
Container kartu metrik KPI, profil pengguna, dan kartu konten terstruktur.
Rikat Declarative / PrimeNG-StyleKomponen kontainer konten deklaratif ala <p-card> di PrimeNG menggunakan tag <l-card>. Menyajikan informasi terstruktur, metrik bisnis (KPI), kartu media, profil, dan grup konfigurasi dengan pembagian header, subheader, dan footer yang rapi.
Kartu Deklaratif Ringkasan & Profil (p-card Style)
Total transaksi tercatat mencapai 24.850 dengan tingkat keberhasilan 99.8% tanpa kendala server.
Ilham Hatta Manggala
Purwokerto, Jawa Tengah
<!-- Kartu Deklaratif Header & Subheader -->
<l-card header="Ringkasan Analitik" subheader="Data 30 Hari Terakhir">
<p>Total transaksi tercatat mencapai 24.850.</p>
<l-button label="Lihat Laporan" size="sm"></l-button>
</l-card>
Kartu Metrik Performa Bisnis (<l-stat>)
<!-- PrimeNG-Style Metrik Bisnis Deklaratif -->
<l-stat label="TOTAL PENDAPATAN" value="Rp 148,2 Jt" icon="dollar-sign" trend="up" delta="+14.2%"></l-stat>
<l-stat label="PENGGUNA AKTIF" value="8.420" icon="users" delta="120 sedang online"></l-stat>
<l-stat label="KECEPATAN RESPON" value="18 ms" icon="zap" trend="up" delta="10x lebih cepat"></l-stat>
Kartu Konten Terstruktur (<l-card>)
Node utama penanganan permintaan API dengan redundansi tinggi dan auto-healing.
Instans pembacaan cadangan untuk query analitik berat tanpa membebani primary node.
<!-- PrimeNG-Style Kartu Deklaratif -->
<l-card header="Kluster Produksi BMS" subheader="Region: ID-Central">
<p>Node utama penanganan permintaan API.</p>
<l-badge value="Berjalan Stabil" severity="success" dot></l-badge>
</l-card>
Kartu Konfigurasi Berkelompok (<l-card>)
<!-- Kartu Konfigurasi Berkelompok -->
<l-card header="Keamanan Akun" subheader="Preferensi Privasi">
<l-switch label="Autentikasi Dua Faktor (2FA)" checked></l-switch>
<l-switch label="Pemberitahuan Sesi Masuk Baru" checked></l-switch>
</l-card>