Django Divider Component

Divider renders a styled separator with optional label text centred on the line. Use horizontal dividers between page sections and vertical dividers to split side-by-side panels.

Basic Divider

Preview

Content

First section

Content

Second section

Code

<div class="flex w-full flex-col">
  <c-lb.card variant="primary">
    <c-lb.card.body>
      <c-lb.card.title>Content</c-lb.card.title>
      <p>First section</p>
    </c-lb.card.body>
  </c-lb.card>
  <c-lb.divider>OR</c-lb.divider>
  <c-lb.card variant="primary">
    <c-lb.card.body>
      <c-lb.card.title>Content</c-lb.card.title>
      <p>Second section</p>
    </c-lb.card.body>
  </c-lb.card>
</div>

Color Variants

Preview

Primary

Secondary

Accent

Neutral

Code

<div class="flex w-full flex-col gap-2">
  <c-lb.divider variant="primary">Primary</c-lb.divider>
  <c-lb.divider variant="secondary">Secondary</c-lb.divider>
  <c-lb.divider variant="accent">Accent</c-lb.divider>
  <c-lb.divider variant="neutral">Neutral</c-lb.divider>
</div>

Text Position

Preview

Start

Default

End

Code

<div class="flex w-full flex-col">
  <c-lb.divider position="start">Start</c-lb.divider>
  <c-lb.divider>Default</c-lb.divider>
  <c-lb.divider position="end">End</c-lb.divider>
</div>

Horizontal Divider

Preview

Content

Left section

Content

Right section

Code

<div class="flex w-full">
  <c-lb.card variant="primary" class="grow">
    <c-lb.card.body>
      <c-lb.card.title>Content</c-lb.card.title>
      <p>Left section</p>
    </c-lb.card.body>
  </c-lb.card>
  <c-lb.divider direction="horizontal">OR</c-lb.divider>
  <c-lb.card variant="primary" class="grow">
    <c-lb.card.body>
      <c-lb.card.title>Content</c-lb.card.title>
      <p>Right section</p>
    </c-lb.card.body>
  </c-lb.card>
</div>

API Reference

`c-lb.divider`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	-	No	Color variant
direction	horizontal vertical	-	No	Divider direction
position	start end	-	No	Text position on divider

Slot Name	Description
default	Optional text content displayed on the divider