Tampilan Data
Card (Kartu Layanan & Statistik)
Wadah kartu serbaguna untuk katalog layanan publik daerah, kartu berita, dan ringkasan metrik dashboard.
Card (.mjl-card) mengelompokkan informasi dan aksi terkait dalam satu panel berbingkai rapi dengan efek interaksi hover halus.
1. Pratinjau Kartu Layanan Publik
Pratinjau Kartu Layanan Warga
🪪
KTP Elektronik
Layanan AktifPerekaman baru, pencetakan KTP rusak, dan penggantian data akibat pindah domisili wilayah Majalengka.
Ajukan Sekarang →
🏠
Pajak Bumi & Bangunan
BapendaPengecekan tagihan SPPT PBB-P2 dan pembayaran daring terintegrasi melalui QRIS atau transfer bank.
Cek Tagihan SPPT →Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<a href="/layanan/ktp" class="mjl-card mjl-card--interactive">
<div class="mjl-card__header">
<h3 class="mjl-card__title">KTP Elektronik</h3>
<p class="mjl-card__desc">Perekaman baru dan cetak ulang KTP yang hilang.</p>
</div>
<div class="mjl-card__footer">
<span class="mjl-badge mjl-badge--success">Daring</span>
<span aria-hidden="true">→</span>
</div>
</a>
<script setup lang="ts">
import { MjlCard, MjlBadge } from '@majalengka/vue';
</script>
<template>
<MjlCard title="KTP Elektronik" desc="Perekaman baru dan cetak ulang KTP yang hilang." href="/layanan/ktp">
<template #footer>
<MjlBadge variant="success">Daring</MjlBadge>
<span aria-hidden="true">→</span>
</template>
</MjlCard>
</template>
import type { ReactNode } from 'react';
export function MjlCard({ title, desc, href, footer }: { title: string; desc?: string; href?: string; footer?: ReactNode }) {
const isi = (
<>
<div className="mjl-card__header">
<h3 className="mjl-card__title">{title}</h3>
{desc && <p className="mjl-card__desc">{desc}</p>}
</div>
{footer && <div className="mjl-card__footer">{footer}</div>}
</>
);
return href
? <a href={href} className="mjl-card mjl-card--interactive">{isi}</a>
: <div className="mjl-card">{isi}</div>;
}
import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'mjl-card',
standalone: true,
imports: [RouterLink],
template: `
<a [routerLink]="link()" class="mjl-card mjl-card--interactive">
<div class="mjl-card__header">
<h3 class="mjl-card__title">{{ title() }}</h3>
@if (desc()) { <p class="mjl-card__desc">{{ desc() }}</p> }
</div>
<div class="mjl-card__footer"><ng-content /></div>
</a>
`,
})
export class MjlCard {
title = input.required<string>();
desc = input<string>();
link = input.required<string>();
}
<div class="grid">
@foreach ($layanan as $item)
<a href="{{ route('layanan.show', $item) }}" class="mjl-card mjl-card--interactive">
<div class="mjl-card__header">
<h3 class="mjl-card__title">{{ $item->nama }}</h3>
<p class="mjl-card__desc">{{ $item->ringkasan }}</p>
</div>
<div class="mjl-card__footer">
<span class="mjl-badge mjl-badge--{{ $item->daring ? 'success' : 'neutral' }}">{{ $item->daring ? 'Daring' : 'Datang ke loket' }}</span>
<span aria-hidden="true">→</span>
</div>
</a>
@endforeach
</div>
<?php foreach ($daftarLayanan as $item): ?>
<a href="layanan.php?id=<?= (int) $item['id'] ?>" class="mjl-card mjl-card--interactive">
<div class="mjl-card__header">
<h3 class="mjl-card__title"><?= htmlspecialchars($item['nama']) ?></h3>
<p class="mjl-card__desc"><?= htmlspecialchars($item['ringkasan']) ?></p>
</div>
</a>
<?php endforeach; ?>