KarirKit KarirKit
KarirIcon Template

Overview

Design system produk KarirLink: token, komponen, dan ikon yang dipakai semua halaman.

KarirKit KarirKit v1.5.0

Kelas komponen Tailwind v4, JavaScript ringan untuk interaksi (Modal, Drawer, Table, dan lainnya), serta ikon KarirIcon. Aplikasi memakai paketnya lewat npm dan membangun CSS-nya sendiri dari tema KarirKit.

Lihat Komponen KarirIcon Template

0

Foundation

0

Components

0

Forms

0

Plugins

Mulai cepat

Paket dipublikasikan di GitHub Packages, jadi siapkan .npmrc lebih dulu (langkahnya ada di README).

1. Install

Salin perintah install

2. Impor tema di CSS aplikasi

Salin impor tema

Isi KarirKit

Design tokens
Warna, tipografi, radius, dan bayangan dalam tiga lapisan: primitive, semantic, dan komponen.
Komponen
Kelas siap pakai untuk tombol, form, tabel, navigasi, modal, dan lainnya, dengan JavaScript ringan bila perlu.
Tema Light, Dark, dan System
Opt-in per halaman lewat data-theme, pilihan tersimpan di peramban.
KarirIcon
Set ikon KarirKit dengan beberapa bobot, dipakai lewat kelas kk-*.

Colors

Primary & secondary diturunkan langsung dari logo KarirLink, plus warna semantik. Tersedia sebagai utility bg-*, text-*, border-*.

Primary - Blue

50

100

200

300

400

500

600 base

700

800

900

950

Secondary - Orange

50

100

200

300

400

500

600 base

700

800

900

950

Neutral (owned primitive)

50

100

200

300

400

500

600

700

800

900 teks utama

950

Semantic surfaces (light-only)

Dark mode deferred — pakai alias ini, jangan hardcode white/slate di komponen baru.

background

surface

border

Aa

fg

Aa

fg-muted

Aa

fg-subtle

Status (full scale)

Success

50

100

200

500

700

900

Warning

50

100

200

500

700

900

Danger

50

100

200

500

700

900

Info

50

100

200

500

700

900

Gradient & shell

bg-brand-gradient
bg-brand-gradient-soft
bg-shell (app background)

Typography

Instrument Sans - satu keluarga font untuk judul, branding, dan teks antarmuka.

Instrument Sans

Aa Bb Cc 123

Aa Bb Cc

Regular · 400

Aa Bb Cc

Medium · 500

Aa Bb Cc

SemiBold · 600

Aa Bb Cc

Bold · 700

Selamat pagi, Ahmad

font-display · text-3xl · font-bold

Ringkasan Performa Lamaran

font-display · text-2xl · font-bold

Perlu Aksi Hari Ini

text-lg · font-semibold

Teks antarmuka standar untuk deskripsi kartu dan isi tabel.

text-sm · text-slate-600

Teks kecil untuk keterangan, metadata, dan timestamp.

text-xs · text-slate-500

Label Grup Navigasi

text-[11px] · uppercase · tracking-wider

Icons

Ikon KarirKit — token berbasis class, pakai seperti icon font: <i class="kk kk-home"></i>. Mewarisi currentColor, ukuran diatur lewat utility h-*/w-*. Buka KarirIcon, katalog 1.512 ikon →

home

briefcase

document

calendar

bookmark

message

settings

search

bell

sparkles

eye

chart-bar

check-circle

warning

clock

plus

logout

star

shield-check

chevron-right

Weights

Tambahkan satu class modifier di samping kk-nama untuk ganti ketebalan — default (tanpa modifier) adalah Regular.

Thin

Light

Regular

Bold

Fill

Duotone

Button

Tujuh varian (+ ghost-inverse), tiga ukuran, ikon, disabled, dan loading.

Variants

Sizes

Dengan ikon & state

Di atas gradient

Varian tombol lainnya

Default button

Button pills

Gradient monochrome

Gradient duotone

Gradient outline

Colored shadows

Social buttons

Outline buttons

Button sizes

Outline button sizes

Button sizes with icon

Buttons with icon

Button with label

Icon buttons

Loader

Disabled

Button Group

Kumpulan tombol yang menyatu - horizontal, vertikal, dengan ikon, dropdown, badge, dan pagination. Anatomi: .btn-group > .btn-group-item; item aktif memakai aria-current="true".

Default example

Button group info

Button group icon action

Button group icons

UbahBagikanSimpanHapus

Button group dropdown

Button group badge

QR code button group

Pagination button group

Vertical button groups

Button group with colors

Button group as links

Profil Pengaturan Pesan

Group buttons with icons

Button group outline

Badge

Status pill untuk lamaran, prioritas, dan tag AI.

Soft

Diterima Ditinjau Menunggu Ditolak Baru Rekomendasi Draf

Solid

Success Info Warning Danger Neutral

Tag AI / kepercayaan

96% Confidence CRITICAL NEEDS ATTENTION

Varian badge lainnya

Default badges

PrimarySecondaryNeutralDangerSuccessWarning

Bordered badges

PrimarySecondaryNeutralDangerSuccessWarning

Large badges

PrimarySecondaryNeutralDangerSuccessWarning

Large bordered badges

PrimarySecondaryNeutralDangerSuccessWarning

Pill badges

PrimarySecondaryNeutralDangerSuccessWarning

Pill bordered badges

PrimarySecondaryNeutralDangerSuccessWarning

Badges as links

PrimarySecondaryNeutralDangerSuccessWarning

Badges with icon

PrimarySecondaryNeutralDangerSuccessWarning

Large badges with icon

PrimarySecondaryNeutralDangerSuccessWarning

Badges with only icon

PrimarySecondaryNeutralDangerSuccessWarning

Large badges with only icon

PrimarySecondaryNeutralDangerSuccessWarning

Badges with dot

PrimarySecondaryNeutralDangerSuccessWarning

Badges with SVG loader

PrimarySecondaryNeutralDangerSuccessWarning

Dismissible badges (chips)

PrimarySecondaryNeutralDangerSuccessWarning

Chips with avatar

PrimaryPrimarySecondarySecondaryNeutralNeutralDangerDangerSuccessSuccessWarningWarning

Notification badge

Button with badge

Avatar

Inisial sebagai fallback, status dot, dan grup bertumpuk.

Ukuran

AD AD AD AD

Dengan status & grup

AD
GJ TP TV +5

Varian avatar lainnya

Default avatar

Avatar bulat Avatar sudut membulat

Bordered

Avatar dengan border Avatar kotak dengan border

Placeholder icon

Placeholder initials

AD JL BG

Avatar tooltip

Ahmad Dimas Ahmad Dimas Jese Leos Jese Leos Bonnie Green Bonnie Green

Dot indicator

PenggunaPenggunaPenggunaPengguna

Stacked

Anggota timAnggota timAnggota timAnggota tim +99

Avatar text

Jese Leos
Jese Leos
Bergabung Agustus 2024

User dropdown

Sizes

Extra small Extra small
18px
Small Small
24px
Base Base
32px
Large Large
44px
Extra large Extra large
56px
2XL 2XL
64px

Card

Kartu dasar, kartu statistik, dan kartu hero bergradasi.

Basic Card

Kontainer default untuk mengelompokkan konten - border tipis, sudut membulat, dan shadow lembut.

.card

12%

248

Lamaran Terkirim

.card + stat layout

AI Career Coach

Kartu hero bergradasi untuk fitur unggulan & highlight AI.

.bg-brand-gradient

Layout kartu lainnya

Default card

Lowongan terbaru minggu ini

Lebih dari 120 lowongan baru dari perusahaan mitra sudah tersedia. Temukan yang paling cocok dengan profilmu.

Card with button

Lengkapi profilmu

Profil yang lengkap meningkatkan peluang dilirik rekruter hingga dua kali lipat.

Card with link

Tips menulis CV

Panduan singkat menyusun CV yang lolos penyaringan otomatis dan menarik di mata rekruter.

Baca selengkapnya

Card with image

Ilustrasi kegiatan karier
Webinar

Strategi wawancara kerja pertama

Card with description

Ilustrasi kelas karier

Kelas persiapan karier

Belajar menyusun portofolio, latihan wawancara, dan negosiasi gaji bersama mentor berpengalaman.

Lihat kelas

Horizontal card

Ilustrasi berita karier

Tren rekrutmen 2026

Skill apa yang paling dicari perusahaan tahun ini, dan bagaimana mempersiapkannya sejak masa kuliah.

Baca artikel

User profile card

Foto profil

Ahmad Dimas

Frontend Engineer

Card with form inputs

Masuk ke KarirLink

Lupa kata sandi?

Belum punya akun? Daftar

E-commerce card

Kelas Persiapan Interview

Kelas Persiapan Interview

4,0
Rp149.000

Call to action card

Cari kerja langsung dari ponsel

Dapatkan notifikasi lowongan yang cocok dan lamar dalam satu ketukan dengan aplikasi KarirLink.

App Store Google Play

Card with nav tabs

Tentang kami

KarirLink menghubungkan lulusan dengan perusahaan lewat lowongan, pelacakan alumni, dan kuesioner tracer study.

Card full width tabs

12,4rb
Lulusan
340
Perusahaan
2,1rb
Lowongan

Card with list

Pelamar terbaru

Lihat semua
  • Neil Sims

    Neil Sims

    neil@email.com

    92%
  • Bonnie Green

    Bonnie Green

    bonnie@email.com

    88%
  • Michael Gough

    Michael Gough

    michael@email.com

    81%
  • Lana Byrd

    Lana Byrd

    lana@email.com

    76%

Pricing card

Paket Premium

Rp99rb/bulan
  • Lamar hingga 100 lowongan/bulan
  • Analisis kecocokan CV dengan AI
  • Prioritas dilihat rekruter
  • Konsultasi karier 1x/bulan

Testimonial card

“Dari sini aku dapat panggilan interview dalam dua minggu. Fitur rekomendasinya benar-benar relevan.”
Neil Sims
Neil Sims
Fresh Graduate
“Tracer study jadi jauh lebih mudah. Data alumni langsung rapi tanpa rekap manual.”
Bonnie Green
Bonnie Green
Staf Kemahasiswaan
“Kami menemukan kandidat yang tepat lebih cepat dibanding jalur rekrutmen sebelumnya.”
Michael Gough
Michael Gough
HR Manager

Forms

Input (error/disabled), select, textarea, checkbox, radio, toggle, dan search.

Format email tidak valid.

Contoh: Product Designer, Data Analyst

Rp

Titik pemisah ribuan ditambahkan otomatis saat mengetik.

bulan

Satuan ditampilkan sebagai akhiran (suffix) di dalam input.

Ketik langsung format dd/mm/yyyy atau pilih lewat kalender.

Checkbox

Radio

Toggle

Search dengan shortcut

⌘K

Pilih Skill (checkbox & tag dropdown)

Radio

Radio example

Disabled state

Radio link

Helper text

Terima ringkasan lowongan yang cocok setiap minggu.

Kamu tetap bisa melihat rekomendasi di dashboard.

Bordered

Radio list group

Horizontal list group

Radio in dropdown

Inline layout

Advanced layout

Advanced layout with icons

Checkbox

Checkbox example

Disabled state

Checkbox link

Helper text

Ringkasan lowongan yang cocok dengan profilmu.

Webinar, kelas, dan kegiatan karier terbaru.

Bordered

Bordered with description

Bordered with icon

Checkbox list group

Horizontal list group

Checkbox dropdown

Inline layout

Colors

Advanced layout

Toggle

Toggle example

Checked state

Disabled state

Double labels

Toggle with icons

Toggle card

Toggle card with icon

Colors

Sizes

Search input

Search bar example

Search with dropdown

Simple search input

Location search

Voice search

Advanced search input

Datepicker

Pemilih tanggal dengan kalender popup, inline, dan rentang tanggal - format, judul, tombol Hari ini/Hapus, autohide, batas min/max, tanggal dinonaktifkan, awal pekan, bahasa, dan arah buka. Semua contoh interaktif: klik input, atau ketik langsung. Kalender dibuat oleh assets/js/datepicker.js (data-datepicker, data-datepicker-inline, data-daterangepicker, KKDatepicker.get()); gaya lewat .datepicker dan .datepicker-panel.

Default datepicker

Input dengan ikon kalender: klik atau fokus untuk membuka kalender, atau ketik langsung (default dd/mm/yyyy). Judul bulan membuka tampilan bulan lalu tahun. Tutup lewat pilihan tanggal, Escape, atau klik di luar.

Ketik langsung atau pilih lewat kalender.

Inline datepicker

Kalender selalu terlihat tanpa input: data-datepicker-inline. Nilai terpilih bisa ditampilkan lewat data-datepicker-output atau event datepicker:change.

Dipilih: –

Datepicker with title

Judul di dalam kalender lewat data-datepicker-title.

Datepicker with buttons

Footer Hari ini dan Hapus lewat data-datepicker-buttons. Tambahkan data-datepicker-autoselect-today untuk mengisi hari ini otomatis.

Autohide

Kalender menutup otomatis setelah memilih tanggal. Matikan dengan data-datepicker-autohide="false" supaya tetap terbuka.

Date format

Format lewat data-datepicker-format. Token: d, dd, m, mm, M (Okt), MM (Oktober), yy, yyyy.

Min and max dates

Batas tanggal lewat data-datepicker-min dan data-datepicker-max: yyyy-mm-dd, today, atau selisih hari seperti +30.

Hanya hari ini sampai 30 hari ke depan.

Disabled dates

Hari tertentu lewat data-datepicker-disabled-days (0 = Minggu) dan tanggal tertentu lewat data-datepicker-disabled.

Sabtu, Minggu, dan 14–15 Okt 2026 tidak bisa dipilih.

Week start and language

Awal pekan lewat data-datepicker-week-start (1 = Senin) dan bahasa lewat data-datepicker-locale (id atau en).

Orientation

Arah kalender lewat data-datepicker-orientation: top atau bottom, ditambah left atau right (mis. top right). Tanpa atribut, kalender membuka ke bawah dan berbalik otomatis bila tidak muat.

Date range picker

Dua input dalam data-daterangepicker berbagi satu kalender: pilih tanggal mulai lalu tanggal selesai, rentang disorot (pratinjau saat kursor bergerak). Event daterangepicker:change.

sampai

Inline date range

Rentang tanpa input: data-datepicker-inline bersama data-datepicker-range.

Rentang: –

Datepicker in modal

Kalender memakai position: fixed sehingga tidak terpotong oleh isi modal yang menggulir.

Timepicker

Pemilih waktu berbasis <input type="time"> bawaan browser dengan ikon jam (.timepicker), plus slot waktu (.choice-slot), rentang jam, dropdown durasi/zona, modal, dan drawer.

Default timepicker

Timepicker with icon

Timepicker with dropdown

Timepicker with select

Timepicker range selector

Timerange with dropdown

Timerange picker with toggle

Inline timepicker buttons

Sesi konsultasi karier

Pilih tanggal dan jam yang kamu inginkan.

  • Online (Google Meet)
  • Mentor + 1 peserta
  • Durasi 30 menit

Pilih hari

Pilih jam

Modal with timepicker

Jadwalkan wawancara

Jam tersedia

Drawer with timepicker

Modal

Dialog di atas backdrop gelap - default, pop-up konfirmasi, form, ukuran, posisi, static, isi panjang yang menggulir, linimasa, daftar pilihan, dan form besar. Semua contoh interaktif: tutup lewat tombol X, tombol di footer, klik area gelap, atau Escape. Gaya lewat .modal-backdrop > .modal-panel; perilaku lewat assets/js/modal.js (data-modal-toggle, data-modal-show, data-modal-hide, data-modal-placement, KKModal.open()).

Default modal

Header dengan tombol tutup, isi, dan footer aksi. Tutup lewat tombol X, tombol di footer, klik area gelap, atau Escape.

Pop-up modal

Konfirmasi singkat: ikon, pesan, dan dua tombol di tengah (kelas .modal-popup + .modal-icon).

Form element

Form di dalam modal, mis. masuk atau undang anggota.

Modal sizes

Lebar diatur di panel: .modal-sm, .modal-md (default), .modal-lg, .modal-xl, .modal-2xl.

Modal placement

Posisi di layar lewat kelas pada .modal-backdrop, atau per pemicu dengan data-modal-placement (top-left … bottom-right, default center).

Static modal

data-modal-backdrop="static": klik di luar tidak menutup modal, jadi pengguna harus memilih salah satu tombol (Escape tetap menutup; matikan dengan data-modal-keyboard="false").

Scrolling modal

Isi panjang menggulir di dalam .modal-body; header dan footer tetap terlihat dan panel tidak pernah lebih tinggi dari layar.

Timeline modal

Modal berisi linimasa, mis. tahapan seleksi.

Choice list modal

Daftar pilihan berikon, mis. memilih metode verifikasi.

Create modal

Form dua kolom di modal besar, mis. menambah lowongan baru.

Pagination

Navigasi antarhalaman - daftar bernomor, ikon, Sebelumnya/Berikutnya, ringkasan data di bawah tabel, dropdown jumlah per halaman, lompat ke halaman, pilih halaman, grup tunggal, tombol terpisah, dan elipsis untuk halaman yang banyak. Contoh pertama sampai keenam hanya markup dan CSS; sisanya interaktif lewat assets/js/pagination.js (data-pagination, KKPagination.get(), event pagination:change). Gaya lewat .pagination dan .pagination-link.

Default pagination

Daftar bernomor yang menyatu: .pagination > li > .pagination-link, halaman aktif memakai aria-current="page". Ukuran lewat .pagination-sm dan .pagination-lg pada daftar. Hanya markup dan CSS.

Pagination with icons

Sebelumnya/Berikutnya diganti ikon. Teks tetap ada untuk pembaca layar (.sr-only).

Previous and next

Hanya dua tombol, tanpa nomor halaman: .pagination.pagination-separate agar tiap tombol membulat sendiri.

Previous and next with icons

Dua tombol dengan panah dan teks.

Table data pagination

Ringkasan jumlah data (.pagination-info) di atas tombol, cocok di bawah tabel.

Small

Menampilkan 1 sampai 10 dari 100 data

Default

Menampilkan 1 sampai 10 dari 100 data

Table pagination with icons

Pola yang sama dengan tombol berpanah.

Small

Menampilkan 1 sampai 10 dari 100 data

Default

Menampilkan 1 sampai 10 dari 100 data

Pagination with dropdown

Daftar halaman interaktif di samping pilihan jumlah data per halaman. Perubahan jumlah per halaman ditangani aplikasi (mis. lewat setTotal()).

Pagination with input

Lompat ke halaman tertentu: ketik nomor lalu tekan Enter (data-pagination-jump). Nomor di luar rentang dijepit ke halaman pertama/terakhir.

Tekan Enter untuk pindah halaman

Input field and button

Kolom nomor halaman dengan tombol Buka. Teks info (data-pagination-text="info") menunjukkan halaman aktif.

Select input and buttons

Pilih halaman dari daftar (data-pagination-select, opsi dibuat otomatis), dengan jumlah halaman dan tombol panah berpetunjuk (tooltip).

dari halaman

Single pagination

Satu grup: Sebelumnya, posisi saat ini (.pagination-static), dan Berikutnya. Tombol otomatis nonaktif di ujung (data-pagination-prev / data-pagination-next).

Separated pagination

Tiap tombol berdiri sendiri: tambahkan .pagination-separate (jarak gap-1.5, semua sudut membulat). Cocok bila daftar boleh turun baris di layar sempit.

Pagination with ellipsis

Untuk halaman yang banyak: lebar daftar tetap, elipsis muncul di sela halaman yang disembunyikan. Atur data-pagination-siblings dan data-pagination-boundary; dengarkan event pagination:change.

Table

Tabel data lengkap - baris belang, kolom belang, hover, kepala yang bisa diurutkan, footer, caption, tanpa border, bayangan, scroll horizontal, pencarian, filter, pagination, pilih baris, tabel pengguna, produk (counter jumlah), dan modal edit. Gaya lewat .table di dalam .table-wrap; fungsi lewat assets/js/table.js (data-table, data-sort, data-table-search, data-page-size).

Default table

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003

Striped rows

NoPosisiPerusahaanKategoriGajiKuotaAksi
1Frontend EngineerGojekTeknologiRp18.000.00012Edit
2Product DesignerTokopediaDesainRp15.000.0004Edit
3Data AnalystTravelokaDataRp14.000.0008Edit
4Marketing SpecialistBukalapakPemasaranRp11.000.0006Edit
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003Edit

Striped columns

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003

Hover state

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003

Table head

NoAksi
1Frontend EngineerGojekTeknologiRp18.000.00012Edit
2Product DesignerTokopediaDesainRp15.000.0004Edit
3Data AnalystTravelokaDataRp14.000.0008Edit
4Marketing SpecialistBukalapakPemasaranRp11.000.0006Edit
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003Edit

Table foot

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
TotalRp58.000.00030

Table caption

Lowongan aktif

Daftar lowongan dari perusahaan mitra beserta kisaran gaji dan sisa kuota pelamar.
NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006

Without border

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003

Table with shadow

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003

Overflow scrolling

NoPosisiPerusahaanKategoriLokasiTipeLevelGajiKuotaPelamarTenggatStatus
1Frontend EngineerGojekTeknologiJakartaFull-timeJunior Rp18.000.0001212030 Okt 2026Dibuka
2Product DesignerTokopediaDesainJakartaFull-timeJunior Rp15.000.000413731 Okt 2026Dibuka
3Data AnalystTravelokaDataJakartaFull-timeJunior Rp14.000.000815432 Okt 2026Dibuka
4Marketing SpecialistBukalapakPemasaranJakartaFull-timeJunior Rp11.000.000617133 Okt 2026Dibuka
5HR Business PartnerTelkom IndonesiaSDMJakartaFull-timeJunior Rp13.000.000318834 Okt 2026Dibuka

Table search

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003
6Backend EngineerShopeeTeknologiRp20.000.00010
7UI/UX ResearcherBlibliDesainRp12.500.0005
8Finance AnalystBank MandiriKeuanganRp12.000.0007

Table filter

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003
6Backend EngineerShopeeTeknologiRp20.000.00010
7UI/UX ResearcherBlibliDesainRp12.500.0005
8Finance AnalystBank MandiriKeuanganRp12.000.0007
9Content StrategistKompas GramediaPemasaranRp9.500.0002
10DevOps EngineerTiket.comTeknologiRp19.000.0006
11Customer SuccessRuangguruOperasionalRp8.500.0009
12RecruiterAstraSDMRp10.000.0004

Table pagination

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003
6Backend EngineerShopeeTeknologiRp20.000.00010
7UI/UX ResearcherBlibliDesainRp12.500.0005
8Finance AnalystBank MandiriKeuanganRp12.000.0007
9Content StrategistKompas GramediaPemasaranRp9.500.0002
10DevOps EngineerTiket.comTeknologiRp19.000.0006
11Customer SuccessRuangguruOperasionalRp8.500.0009
12RecruiterAstraSDMRp10.000.0004

Checkbox selection

NoPosisiPerusahaanKategoriGajiKuota
1Frontend EngineerGojekTeknologiRp18.000.00012
2Product DesignerTokopediaDesainRp15.000.0004
3Data AnalystTravelokaDataRp14.000.0008
4Marketing SpecialistBukalapakPemasaranRp11.000.0006
5HR Business PartnerTelkom IndonesiaSDMRp13.000.0003
6Backend EngineerShopeeTeknologiRp20.000.00010

Table with users

7 pelamar
No Aksi
1
Neil Sims
Neil Sims
neil.sims@email.com
Frontend Engineer
Online
EditHapus
2
Bonnie Green
Bonnie Green
bonnie@email.com
Product Designer
Online
EditHapus
3
Jese Leos
Jese Leos
jese@email.com
Data Analyst
Offline
EditHapus
4
Thomas Lean
Thomas Lean
thomas@email.com
Backend Engineer
Online
EditHapus
5
Leslie Livingston
Leslie Livingston
leslie@email.com
Marketing Specialist
Offline
EditHapus
6
Michael Gough
Michael Gough
michael@email.com
DevOps Engineer
Online
EditHapus
7
Lana Byrd
Lana Byrd
lana@email.com
Recruiter
Offline
EditHapus

Table with products

NoGambarKelasJumlahHargaHapus
1Kelas Persiapan Interview Kelas Persiapan Interview
Rp149.000 Hapus
2Workshop Portofolio Kreatif Workshop Portofolio Kreatif
Rp198.000 Hapus
3Sertifikasi Analisis Data Sertifikasi Analisis Data
Rp249.000 Hapus
TotalRp596.000

Table with modal

NoNamaPosisiStatusAksi
1
Neil Sims
Neil Sims
neil.sims@email.com
Frontend Engineer
Online
 Edit pelamar
2
Bonnie Green
Bonnie Green
bonnie@email.com
Product Designer
Online
 Edit pelamar
3
Jese Leos
Jese Leos
jese@email.com
Data Analyst
Offline
 Edit pelamar
4
Thomas Lean
Thomas Lean
thomas@email.com
Backend Engineer
Online
 Edit pelamar

Alert

Aksen border kiri untuk tingkat urgensi, plus kotak rekomendasi AI.

Critical

Dipakai untuk kondisi yang butuh tindakan segera, mis. interview dalam hitungan jam.

Needs Attention

Kondisi penting namun belum mendesak, mis. CV belum diperbarui.

Info

Informasi netral, mis. pembaruan fitur atau tips umum.

Success

Konfirmasi hasil positif, mis. lamaran berhasil dikirim.

AI Recommendation & Impact

Kotak rekomendasi bertingkat di dalam kartu aksi - memberi konteks kenapa AI menyarankan sesuatu dan dampaknya.

Varian alert lainnya

Default alert

Alerts with icon

Bordered alerts

Alerts with list

Dismissing

Border accent

Additional content

Announcement alerts

Baru Info: fitur terbaru sudah tersedia Baru Gagal: fitur terbaru sudah tersedia Baru Berhasil: fitur terbaru sudah tersedia Baru Perhatian: fitur terbaru sudah tersedia Baru Catatan: fitur terbaru sudah tersedia

Toast

Notifikasi sementara dengan seluruh layout contoh - ikon, warna, aksi, avatar, progress, alert, dan posisi. Tutup lewat [data-toast-dismiss]; assets/js/toast.js opsional untuk dismiss & KKToast.show().

Default toast

Set yourself free.

Colors

Item moved successfully.

Simple toast

Message sent successfully.

Undo button

Conversation archived.

Toast message

JL

Jese Leos

Hi Neil, thanks for sharing your thoughts regarding KarirKit.

Push notification

New notification a few seconds ago
BG

Bonnie Green

commented on your photo

Interactive toast

Update available

A new software version is available for download.

Toast illustration

Connect your wallet

Connect your wallet by clicking the bottom-right blue button.

Toast progress bar

Uploading in progress

Please wait while your file is being uploaded. This may take a moment.

75%

Toast danger alert

Toast warning alert

Positioning

Top left positioning.
toast-top-left
Top right positioning.
toast-top-right
Bottom right positioning.
toast-bottom-right
Bottom left positioning.
toast-bottom-left

JavaScript behaviour

QR Code

QR code sebagai SVG inline, dirender offline oleh assets/js/qr-code.js (library qrcode-generator di-vendor, tanpa CDN). Selalu hitam-di-atas-putih agar terbaca scanner, juga di dark mode. Tambahkan data-qr-brand untuk versi personalisasi: modul membulat, warna solid brand, dan logo mark KarirLink di tengah.

QR code generator

Branded QR code (KarirLink)

Modul membulat (nyambung mulus antar modul yang berdekatan), warna solid primary, pola pencari membulat, dan logo mark KarirLink (produk yang dituju QR ini) di tengah - semua cuma lewat satu atribut data-qr-brand.

Logo menutupi modul data asli, jadi dipaksa ke H selama kotak "Logo di tengah" dicentang. Hapus centangnya untuk coba level lain.

Branded QR code variants

Dots saja (hitam)

Brand tanpa logo

Warna solid kustom

Gradien kustom

Default QR code

QR code with input

Salin URL

QR code with card

Scan untuk mengunduh aplikasi

Arahkan kamera ponsel ke kode di atas untuk membuka halaman unduhan KarirLink.

Buka halaman unduhan

Share profile with QR

AD

Ahmad Dimas

Frontend Engineer

Bagikan profilmu - minta orang lain scan kode ini untuk membuka profil publikmu.

Loading state

Membuat QR code…

Success state

Scanned

Expired state

WYSIWYG

Rich text editor tanpa dependensi (contenteditable), jalan offline - tanpa dependensi eksternal/CDN. Aktifkan dengan data-wysiwyg + assets/js/wysiwyg.js; ambil isi lewat KKWysiwyg.get(root).getHTML(). Pintasan Ctrl/Cmd+Alt+0..6 untuk paragraf & heading.

Default text editor

Selamat datang di editor KarirKit

Tulis, format, dan atur teks langsung di sini. Pilih sebagian teks lalu pakai toolbar di atas — coba miring, garis bawah, atau tambahkan tautan.

Gunakan kode inline untuk potongan kode singkat.

Text formatting

Setiap komentar bisa diformat: tebal, miring, H2O, x2, dan sorotan.

Pilih teks lalu terapkan format

Text alignment

Judul paragraf

Letakkan kursor di paragraf, lalu pilih perataan: kiri, tengah, kanan, atau rata kiri-kanan (justify). Perataan berlaku untuk blok yang sedang dipilih, termasuk judul. Teks yang cukup panjang membuat efek justify terlihat jelas pada baris-baris penuh.

Typography elements

Elemen tipografi

Paragraf biasa, diikuti daftar dan kutipan.

  • Butir pertama
  • Butir kedua
  1. Langkah satu
  2. Langkah dua
Desain yang baik adalah sesedikit mungkin desain.
npm install @foxtrot-sevima/karirkit

Coba pintasan Ctrl+Alt+1 untuk Heading 1.

Chart

Grafik line, area, column, bar, donut, pie, radial, dan sparkline yang mengikuti token warna dan mode gelap, plus layout kartu dengan ringkasan, periode, dan tautan laporan. Cukup tulis data-chart="line" dengan data-chart-series, -categories, -colors, -height, -legend, -format; dirender oleh assets/js/chart.js (API KKChart.init|render|get|destroy).

Line chart

Garis halus untuk tren. Beberapa seri otomatis memakai warna token berurutan.

Lamaran per bulan

6 bulan terakhir

Area chart

Garis dengan isian gradasi lembut; cocok untuk satu seri berkelanjutan.

Kunjungan lowongan

Tren pengunjung

Column chart (stacked)

Kolom bersudut membulat. Tambahkan data-chart-stacked untuk menumpuk seri.

Pengisian kuesioner

Per angkatan

Bar chart (horizontal)

Batang horizontal untuk peringkat. Format angka lewat data-chart-format (number, percent, rupiah, compact).

Sebaran lokasi kerja

Persentase alumni

Donut chart

Total ditampilkan di tengah; label lewat data-chart-total-label.

Status lamaran

Semua lamaran

Pie chart

Proporsi sederhana tanpa lubang di tengah.

Status setelah lulus

Hasil tracer study

Radial chart

Capaian dalam cincin (0–100). Dengan lebih dari satu seri, tengahnya menampilkan rata-rata.

Capaian respon

Terhadap target

Sparkline

Grafik mini tanpa sumbu, legenda, atau grid — untuk dipasang di dalam kartu statistik.

Pelamar baru

1.284

+12%

Kartu area dengan ringkasan

Layout kartu umum: nilai besar + persentase perubahan di atas, grafik area di tengah, pilihan periode dan tautan laporan di bawah.

32,4 rb

Pelamar minggu ini

12%
Laporan lengkap

Kartu dengan statistik ringkas

Beberapa angka ringkas di atas grafik garis dua seri, dengan footer periode.

Lamaran

1.284

8,2%

Diterima

312

2,1%
Lihat detail

Kartu kolom dengan legenda

Kolom bertumpuk dengan keterangan warna di header kartu, cocok untuk perbandingan dua kelompok.

Pengisian kuesioner

SudahBelum

Per angkatan

Laporan lengkap

Kartu donut dengan rincian

Donut dengan daftar rincian per kategori di bawahnya, lengkap dengan nilai dan titik warna.

Status lamaran

Semua lowongan aktif

  • Diterima4
  • Ditolak5
  • Diproses2
Laporan lengkap

Kartu bar dengan peringkat

Batang horizontal untuk peringkat dengan judul dan tautan di footer.

Lokasi kerja alumni

Empat kota teratas

4,5%
Laporan lengkap

Clipboard

Tombol untuk menyalin teks - input, input dengan ikon, tombol berlabel, grup input, blok kode, kartu kredensial, detail kontak, dan dialog bagikan. Pasang data-clipboard-target pada tombol; assets/js/clipboard.js menyalin isi elemen tujuan dan menukar [data-clipboard-default] dengan [data-clipboard-success] selama 2 detik (opsi data-clipboard-type, -text, -duration, -toast; API KKClipboard.copy()).

Default copy to clipboard

Tombol dengan data-clipboard-target menyalin isi input. Bagian [data-clipboard-default] berganti ke [data-clipboard-success] selama 2 detik.

Input with copy button

Tombol ikon di dalam input (.input-icon-btn) dengan tooltip yang berubah menjadi "Tersalin!".

Salin ke papan klip

Copy button with text

Tombol kecil berlabel di tepi kanan input.

Input group with copy

Awalan "URL" (.input-group-addon), input, dan tombol salin menyatu dalam .input-group; teks bantuan di bawahnya.

URL Salin tautan

Bagikan tautan ini ke alumni lewat email atau pesan.

URL shortener

Tombol aksi di kiri, tautan hasil di tengah, tombol salin di kanan.

Salin tautan

Pastikan tautan yang dimasukkan valid.

Copy source code block

Salin isi blok kode: data-clipboard-type="html" membaca innerHTML dengan entitas HTML didekode, jadi yang tersalin adalah kode aslinya.

<div data-chart="line"
     data-chart-series='[{"name":"Lamaran","data":[4,7,5,9]}]'
     data-chart-categories='["Mei","Jun","Jul","Agu"]'></div>

Card with API keys

Beberapa kolom dalam satu kartu, masing-masing punya tombol salin dan tooltip sendiri.

Kredensial API

Simpan nilai berikut di tempat yang aman; kunci hanya ditampilkan sekali.

Salin
Salin
Salin

Copy contact details

Salin teks biasa dari sebuah blok (data-clipboard-type="text"); tiap baris menjadi satu baris hasil.

Bonnie Green

bonnie@karirkit.com

+62 812 3456 7890

Salin kontak

Copy button with modal

Tombol salin di dalam dialog bagikan; dialog dibuka dengan data-modal-show (assets/js/modal.js).

File Upload

Unggah file lewat klik atau seret - input file standar, dropzone, banyak file dengan progres, pratinjau gambar, varian ringkas, error, dan disabled. Bungkus dengan .upload + data-file-upload; assets/js/file-upload.js memvalidasi format (accept) dan ukuran (data-upload-max-size, MB), menampilkan daftar file, dan menyinkronkan file ke <input type="file">. Event upload:add, upload:remove, upload:error; API KKUpload.

File input

Input file standar dengan gaya .input-file: tombol "Choose file" bawaan browser dipakai ulang tanpa JS. Cocok untuk satu berkas di formulir yang padat.

PDF, DOC, atau DOCX, maksimal 5 MB.

Dropzone

.upload + .upload-drop: klik atau seret file. Format dibaca dari accept, batas ukuran dari data-upload-max-size (MB); file yang ditolak menampilkan pesan di .form-error. Di ponsel teks "atau seret" disembunyikan dan area lebih ringkas.

Multiple files with progress

Atribut multiple pada input dan data-upload-max-files membatasi jumlah. data-upload-simulate="true" menampilkan progres palsu untuk mockup; di aplikasi, isi progres lewat KKUpload.progress(el, file, persen).

Image preview

data-upload-preview="image" menampilkan miniatur gambar yang dipilih (poster, logo, foto). File non-gambar memakai ikon berkas.

Compact

.upload-compact: satu baris dengan ikon di kiri, untuk formulir yang tidak butuh area besar (pengaturan, modal).

Sizes

Lebar selalu mengikuti wadah. Tinggi area diatur lewat .upload-sm (7rem), bawaan (11rem), atau .upload-lg (16rem); nilai bebas lewat style="--upload-h: 12rem". Di ponsel tinggi dibatasi 8,5rem.

Error

Tambahkan aria-invalid="true" pada .upload dan .form-error di bawahnya. Pesan ini juga diisi otomatis saat format atau ukuran file ditolak (event upload:error).

Proposal wajib diunggah untuk kegiatan kerja sama.

Disabled

Atribut disabled pada input menonaktifkan klik dan seret.

List Group

Daftar baris dalam satu bingkai - teks, tautan, tombol, ikon, daftar fitur, statistik dengan pemisah, dan daftar pengguna dengan aksi. Anatomi: .list-group > .list-group-item (li, a, atau button); tambahkan .list-group-item-action untuk hover dan fokus, aria-current="true" untuk baris aktif, disabled untuk baris nonaktif. Hanya CSS.

Default list group

.list-group membungkus baris-baris .list-group-item yang dipisah garis. Lebar diatur dengan utilitas (w-48).

  • Profil
  • Pengaturan
  • Pesan
  • Unduh

List group with links

Tautan sebagai item dengan .list-group-item-action (hover dan fokus); item aktif memakai aria-current="true".

Profil Pengaturan Pesan Unduh

List group with buttons

Tombol sebagai item. Atribut disabled mematikan baris dan memberi kursor tidak boleh.

List group with icons

Ikon kk-* di kiri label; jarak antar-isi dari gap-2 pada item.

Profil Pengaturan Pesan Unduh

Features list group

Daftar fitur dalam kartu: ikon centang untuk fitur yang tersedia, teks tercoret untuk yang tidak.

  • 2 anggota tim
  • Penyimpanan 20 GB
  • Bantuan integrasi
  • Berkas desain
  • Akses API
  • Dokumentasi lengkap
  • Telepon 24x7

Statistic list with divider

Label berikon di kiri dan nilai di kanan; pemisah antar-baris dari divide-y.

  • ElektronikRp5 M
  • FesyenRp2,78 M
  • Perabot rumahRp1,8 M
  • OtomotifRp1,1 M
  • Makanan dan minumanRp987 jt
  • MainanRp705 jt
  • Buku dan musikRp688 jt
  • Perlengkapan kantorRp534 jt

List with avatars and CTA

Daftar pengguna dalam kartu: avatar, nama dan email (terpotong bila panjang), tombol aksi, dan tombol ikon dengan tooltip.

Pengguna terbaru

  • NS

    Neil Sims

    neil@karirkit.com

    Hapus
  • BG

    Bonnie Green

    bonnie@karirkit.com

    Hapus
  • MG

    Michael Gough

    michael@karirkit.com

    Hapus
  • LB

    Lana Byrd

    lana@karirkit.com

    Hapus
  • TL

    Thomas Lean

    thomas@karirkit.com

    Hapus

Timeline

Urutan peristiwa berdasarkan waktu - titik polos, penanda berikon, stepper mendatar, log aktivitas dengan avatar, dan linimasa berkelompok per tanggal. Vertikal: ol.timeline > li.timeline-item dengan .timeline-marker atau .timeline-dot, .timeline-title, .timeline-body. Mendatar: .timeline-steps > .timeline-step. Hanya CSS.

Default timeline

ol.timeline dengan garis di kiri; tiap li.timeline-item memuat titik .timeline-dot, waktu (.timeline-time), judul (.timeline-title), dan isi (.timeline-body). Pakai .timeline-item-dot untuk jarak titik polos.

  1. Pendaftaran akun dan profil

    Alumni melengkapi profil dasar, riwayat pendidikan, dan kontak sebelum mengisi kuesioner.

    Pelajari

  2. Pengisian Kuesioner Lulusan

    Kuesioner Tracer Study dibuka untuk angkatan terbaru dengan pengingat otomatis.

  3. Rekap dan laporan akreditasi

    Data jawaban dirangkum menjadi laporan partisipasi dan status karier alumni.

Vertical timeline

Penanda berikon .timeline-marker menutupi garis, dengan lencana waktu dan lencana "Terbaru" di judul.

  1. KarirKit v1.3.0Terbaru

    Tabel dirombak total, Modal dan Datepicker dilengkapi.

    Unduh ZIP

  2. KarirKit v1.2.0

    Storybook interaktif penuh dan komponen Breadcrumb.

  3. KarirKit v1.1.0

    Penamaan komponen diseragamkan di seluruh dokumentasi.

Stepper timeline

Mendatar mulai ukuran sm dengan .timeline-steps > .timeline-step; garis penghubung .timeline-step-line tersembunyi di ponsel dan langkah menumpuk ke bawah.

  1. Tahap 1: Pengiriman

    Tautan kuesioner dikirim ke alumni dan dipantau dari dashboard.

  2. Tahap 2: Pengisian

    Tautan kuesioner dikirim ke alumni dan dipantau dari dashboard.

  3. Tahap 3: Rekap

    Tautan kuesioner dikirim ke alumni dan dipantau dari dashboard.

Activity log

Penanda berisi avatar dan kartu .card per aktivitas; lencana waktu berada di kanan pada layar lebar.

  1. BG
    Bonnie Green memindahkan Jese Leos ke Grup Alumni 2025
  2. TL
    Thomas Lean berkomentar di Laporan Tracer Study
    "Halo semua! Saya ingin membagikan hasil rekap partisipasi angkatan 2024 untuk bahan rapat akreditasi."
  3. RK
    Rina Kartika memindahkan Dewi Pratiwi ke Grup Alumni 2024

Grouped timeline

Satu kotak per tanggal berisi daftar bergaris pemisah (divide-y) dengan avatar, kutipan, dan lencana visibilitas.

  1. LR
    Laura Romeros menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Publik
  2. MW
    Mike Willi menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Privat
  3. JL
    Jese Leos menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Publik
  4. BG
    Bonnie Green menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Privat
  1. LR
    Laura Romeros menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Publik
  2. MW
    Mike Willi menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Privat
  3. JL
    Jese Leos menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Publik
  4. BG
    Bonnie Green menambahkan komentar di Laporan Tracer Study
    "Saya ingin membagikan rekap partisipasi angkatan ini."
    Privat

Tabs

Tab berlatar, bergaris bawah, berikon, pil, vertikal, selebar kontainer (dengan select di ponsel), serta tab interaktif dengan panel. Anatomi: .tabs + varian .tabs-default, -underline, -pills, -vertical, -full > .tabs-item. Aktif: aria-current="page" atau aria-selected="true"; nonaktif: aria-disabled="true". Interaktif lewat data-ui-tabs (assets/js/ui.js). Tab bersegmen .tab ada di bagian Navigation.

Default tabs

.tabs.tabs-default berisi .tabs-item; tab aktif memakai aria-current="page" (atau aria-selected="true"), tab nonaktif memakai aria-disabled="true".

Tabs with underline

.tabs-underline: garis bawah penuh dengan penanda aktif di bawah tab.

Tabs with icons

Ikon kk-* di kiri label; jarak otomatis dari gap-2 pada .tabs-item.

Pills tabs

.tabs-pills: tab berbentuk pil, aktif berlatar primer.

Vertical tabs

.tabs-vertical di samping panel pada layar md ke atas, menumpuk di ponsel. Interaktif lewat data-ui-tabs.

Nonaktif

Tab Profil

Ini isi tab Profil pada tampilan vertikal.

Di layar kecil daftar tab tampil di atas panel.

Full width tabs

.tabs-full: tab menyatu selebar kontainer. Di ponsel tampilkan <select> (sm:hidden) dan sembunyikan tab (hidden sm:flex).

Full width tabs with icons

Sama seperti tab selebar kontainer, dengan ikon di kiri label.

Interactive tabs

Tab dengan panel: bungkus dengan data-ui-tabs, beri tab role="tab" dan data-ui-tab="id-panel". Panah kiri/kanan berpindah tab, Home dan End ke tab pertama/terakhir.

Ini isi tab Profil. Panel lain disembunyikan sampai tabnya dipilih.

Active tab style

Warna tab aktif dan nonaktif bisa diganti per komponen lewat data-ui-tabs-active-classes dan data-ui-tabs-inactive-classes pada data-ui-tabs.

Ini isi tab Profil. Panel lain disembunyikan sampai tabnya dipilih.

Drawer

Panel yang meluncur dari tepi layar - kiri, kanan, atas, bawah, bottom sheet dengan pegangan, pilihan penguncian halaman dan latar gelap, navigasi, formulir kontak, dan filter. Anatomi: .drawer (+ -left, -right, -top, -bottom) > .drawer-header + .drawer-body + .drawer-footer; dibuka dengan data-drawer-toggle (assets/js/drawer.js, API KKDrawer).

Default drawer

.drawer berisi .drawer-header (.drawer-title + .drawer-close), .drawer-body, dan .drawer-footer. Buka dengan data-drawer-toggle="id"; tutup dengan tombol silang, Escape, atau klik latar gelap. Default di kiri (.drawer-left).

Pengaturan Tracer

Pasang kuesioner Tracer Study ke seluruh angkatan lewat satu tautan. Alumni cukup memindai QR code dan mengisi kuesioner dari ponsel.

Hasilnya langsung masuk ke dasbor sehingga program studi dapat memantau partisipasi per angkatan.

Drawer placement

Posisi lewat kelas .drawer-left, .drawer-right, .drawer-top, atau .drawer-bottom (atau atribut data-drawer-placement). Lebar kiri/kanan diatur dengan utilitas w-* (default 20rem).

Drawer kiri

Pasang kuesioner Tracer Study ke seluruh angkatan lewat satu tautan. Alumni cukup memindai QR code dan mengisi kuesioner dari ponsel.

Hasilnya langsung masuk ke dasbor sehingga program studi dapat memantau partisipasi per angkatan.

Drawer kanan

Pasang kuesioner Tracer Study ke seluruh angkatan lewat satu tautan. Alumni cukup memindai QR code dan mengisi kuesioner dari ponsel.

Hasilnya langsung masuk ke dasbor sehingga program studi dapat memantau partisipasi per angkatan.

Drawer atas

Pasang kuesioner Tracer Study ke seluruh angkatan lewat satu tautan. Alumni cukup memindai QR code dan mengisi kuesioner dari ponsel.

Hasilnya langsung masuk ke dasbor sehingga program studi dapat memantau partisipasi per angkatan.

Drawer bawah

Pasang kuesioner Tracer Study ke seluruh angkatan lewat satu tautan. Alumni cukup memindai QR code dan mengisi kuesioner dari ponsel.

Hasilnya langsung masuk ke dasbor sehingga program studi dapat memantau partisipasi per angkatan.

Bottom sheet with edge

.drawer-edge pada drawer bawah menyisakan pegangan yang selalu terlihat; tombol pegangan memakai data-drawer-toggle dan drawer ini tanpa latar gelap (data-drawer-backdrop="false"). .drawer-contained menempatkannya di dalam kontainer relative (di sini kotak contoh) alih-alih di tepi layar.

Pegangan muncul di tepi bawah kotak ini; klik untuk membuka widget.

Body scrolling

Dengan latar gelap, halaman terkunci saat drawer terbuka. data-drawer-body-scrolling="true" membiarkan halaman tetap bisa digulir.

Halaman terkunci

Halaman di belakang tidak bisa digulir selama drawer terbuka.

Halaman bisa digulir

Halaman di belakang masih bisa digulir.

Backdrop options

data-drawer-backdrop="false" menghilangkan latar gelap (halaman tetap bisa dipakai); "static" mempertahankan latar tetapi klik di luar tidak menutup drawer.

Dengan latar

Klik di luar drawer untuk menutup.

Tanpa latar

Tidak ada latar gelap; tutup lewat tombol silang atau Escape.

Latar statis

Klik di luar tidak menutup drawer ini.

Navigation drawer

Menu navigasi samping, mis. untuk tampilan ponsel: daftar .nav-item dengan submenu yang dibuka data-ui-collapse.

Menu

Contact form drawer

Formulir di dalam drawer kanan dengan aksi pada .drawer-footer.

Hubungi kami

Form elements drawer

Berbagai isian (teks, tanggal, pilihan, centang, sakelar) di dalam drawer; daftar yang panjang digulir di dalam .drawer-body.

Filter lanjutan

Status

Progress & Misc

Progress bar, tooltip, dan divider.

Progress bar

Kelengkapan Profil83%
Skor Kecocokan CV65%

Tooltip

Hover atau fokus keyboard (Tab) — pakai .tooltip-content di dalam .group.

Ini contoh tooltip

Divider vertikal

Item AItem BItem C