Chuyển đến nội dung chính
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.

Divider components create visual separation between content sections. Lightweight and semantic, dividers help structure information hierarchically and improve readability. The Frutjam divider system supports horizontal and vertical orientations with optional text content for labeled separations between sections.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
dividerCăn cứHorizontal rule with optional centered label text
divider-horizontalCông cụ sửa đổiHorizontal orientation (default)
divider-verticalCông cụ sửa đổiVertical orientation
divider-startCông cụ sửa đổiAligns label text to the start
divider-endCông cụ sửa đổiAligns label text to the end
divider-solidPhong cáchSolid line style
divider-dashedPhong cáchDashed line style
divider-dottedPhong cáchDotted line style
divider-primaryMàu sắcMàu chủ đề chính
divider-secondaryMàu sắcMàu chủ đề phụ
divider-accentMàu sắcMàu chủ đề nhấn mạnh
divider-neutralMàu sắcMàu chủ đề trung tính
divider-infoMàu sắcMàu sắc ngữ nghĩa thông tin
divider-successMàu sắcMàu ngữ nghĩa thành công
divider-warningMàu sắcMàu ngữ nghĩa cảnh báo
divider-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

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

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

Divider Directions

Horizontal Divider

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

Vertical Divider

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>

Divider with Text

Horizontal with Text

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

Vertical with Text

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>

Divider Colors

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>

Divider Content Positions

You can align the text within a divider to the start, center (default), or end of the line.

Horizontal Positions

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>

Vertical Positions

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>