{{-- ═══════════════════════════════════════ SECTION: GRID ═══════════════════════════════════════ --}}

Grid System

Menggunakan Tailwind CSS grid. Breakpoint: default (mobile), sm: 640px, lg: 1024px.

1 Kolom

col-span-1

2 Kolom

@for ($i = 1; $i <= 2; $i++)

{{ $i }}/2

@endfor

3 Kolom

@for ($i = 1; $i <= 3; $i++)

{{ $i }}/3

@endfor

4 Kolom

@for ($i = 1; $i <= 4; $i++)

{{ $i }}/4

@endfor

Mixed Span (col-span-2 + col-span-1 + col-span-1)

span-2

span-1

Responsive (1 col → 2 col sm → 4 col lg)

@for ($i = 1; $i <= 4; $i++)

@endfor

{{-- ═══════════════════════════════════════ SECTION: TIPOGRAFI ═══════════════════════════════════════ --}}

Tipografi

@php $types = [ ['tag' => 'Display', 'class' => 'text-4xl font-bold text-primary dark:text-dark-text', 'sample' => 'Portal Layanan Publik'], ['tag' => 'H1', 'class' => 'text-3xl font-bold text-primary dark:text-dark-text', 'sample' => 'Pengajuan KTP Elektronik'], ['tag' => 'H2', 'class' => 'text-2xl font-semibold text-primary dark:text-dark-text', 'sample' => 'Rincian Pengajuan'], ['tag' => 'H3', 'class' => 'text-xl font-semibold text-primary dark:text-dark-text', 'sample' => 'Informasi Pemohon'], ['tag' => 'H4', 'class' => 'text-base font-semibold text-primary dark:text-dark-text', 'sample' => 'Status Pengajuan'], ['tag' => 'Body LG', 'class' => 'text-base text-secondary dark:text-dark-text-secondary', 'sample' => 'Pelayanan publik yang cepat dan terpercaya.'], ['tag' => 'Body MD', 'class' => 'text-sm text-secondary dark:text-dark-text-secondary', 'sample' => 'Dokumen akan diproses dalam 3-5 hari kerja setelah verifikasi berkas selesai.'], ['tag' => 'Body SM', 'class' => 'text-xs text-secondary dark:text-dark-text-secondary', 'sample' => 'Dikirim pada 14 Jun 2026, 10:30 WIB'], ['tag' => 'Label / Muted', 'class' => 'text-xs font-medium uppercase tracking-wide text-muted', 'sample' => 'Nomor Induk Kependudukan'], ['tag' => 'Link', 'class' => 'text-sm font-medium text-gov-primary hover:underline', 'sample' => 'Lihat semua pengajuan'], ]; @endphp @foreach ($types as $t)

@endforeach

{{-- ═══════════════════════════════════════ SECTION: TABEL ═══════════════════════════════════════ --}}

Tabel Data

@php $rows = [ ['id' => '#001', 'name' => 'Andi Wijaya', 'service' => 'KTP', 'status' => 'pending', 'date' => '14 Jun 2026'], ['id' => '#002', 'name' => 'Siti Rahma', 'service' => 'KIA', 'status' => 'approved', 'date' => '13 Jun 2026'], ['id' => '#003', 'name' => 'Budi Hartono', 'service' => 'Pernikahan', 'status' => 'rejected', 'date' => '12 Jun 2026'], ['id' => '#004', 'name' => 'Dewi Lestari', 'service' => 'Surat Tanah', 'status' => 'processing', 'date' => '11 Jun 2026'], ]; @endphp @foreach ($rows as $row) @endforeach

ID	Pemohon	Layanan	Status	Tanggal	Aksi
{{ $row['id'] }}	{{ strtoupper(substr($row['name'], 0, 1)) }} {{ $row['name'] }}	{{ $row['service'] }}		{{ $row['date'] }}

Menampilkan 4 dari 4 entri

{{-- ═══════════════════════════════════════ SECTION: GAMBAR ═══════════════════════════════════════ --}}

Gambar & Media

Object Cover (4:3)

Object Contain (4:3)

Avatar Sizes

@foreach (['h-8 w-8 text-xs', 'h-10 w-10 text-sm', 'h-12 w-12 text-base', 'h-16 w-16 text-xl'] as $size) A @endforeach