Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Divider Component

CSS-only Tailwind CSS divider — horizontal and vertical with optional centered label. Color and size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponen pemisah menciptakan pemisahan visual antar bagian konten. Ringan dan semantik, pembagi membantu menyusun informasi secara hierarkis dan meningkatkan keterbacaan. Sistem pembagi Frutjam mendukung orientasi horizontal dan vertikal dengan konten teks opsional untuk pemisahan berlabel antar bagian.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
dividerBasisAturan horizontal dengan teks label terpusat opsional
divider-horizontalPengubahOrientasi horizontal (default)
divider-verticalPengubahOrientasi vertikal
divider-startPengubahMeratakan teks label ke awal
divider-endPengubahMeratakan teks label sampai akhir
divider-solidGayaGaya garis padat
divider-dashedGayaGaya garis putus-putus
divider-dottedGayaGaya garis putus-putus
divider-primaryWarnaWarna tema utama
divider-secondaryWarnaWarna tema sekunder
divider-accentWarnaWarna tema aksen
divider-neutralWarnaWarna tema netral
divider-infoWarnaInfo warna semantik
divider-successWarnaWarna semantik sukses
divider-warningWarnaWarna semantik peringatan
divider-errorWarnaKesalahan warna semantik

Penggunaan Dasar

<div class="divider"></div>

<div className="divider"></div>

Arah Pembagi

Pembagi Horisontal

html 
<div class="divider divider-horizontal"></div>

Pembagi Vertikal

content 1
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Pembagi dengan Teks

Horisontal dengan Teks

OR
html 
<div class="divider divider-horizontal">OR</div>

Vertikal dengan Teks

content 1
OR
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Warna Pembagi

Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

Posisi Isi Pembagi

Anda dapat meratakan teks di dalam pembatas ke awal, tengah (default), atau akhir baris.

Posisi Horisontal

Start
Default
End
html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

Posisi Vertikal

Start
Default
End
html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>