Divider

Divider separates content with a horizontal or vertical line. Supports text labels and colors.

Basic Example

Divider with text and colors 

await import('/components/layout/divider.js');
const { tags, $ } = Lightview;
const { div, Divider } = tags;

const demo = div({ class: 'flex flex-col w-full' },
    div({ class: 'card bg-base-300 p-4 rounded-box' }, 'Content above'),
    Divider({}, 'OR'),
    div({ class: 'card bg-base-300 p-4 rounded-box' }, 'Content below'),
    Divider({ color: 'primary' }, 'Primary'),
    div({ class: 'card bg-base-300 p-4 rounded-box' }, 'More content')
);

$('#example').content(demo);
await import('/components/layout/divider.js');
const { $, tags } = Lightview;
const { Divider, div } = tags;

const demo = {
    tag: div,
    attributes: { class: 'flex flex-col w-full' },
    children: [
        { tag: div, attributes: { class: 'card bg-base-300 p-4 rounded-box' }, children: ['Content above'] },
        { tag: Divider, children: ['OR'] },
        { tag: div, attributes: { class: 'card bg-base-300 p-4 rounded-box' }, children: ['Content below'] },
        { tag: Divider, attributes: { color: 'primary' }, children: ['Primary'] },
        { tag: div, attributes: { class: 'card bg-base-300 p-4 rounded-box' }, children: ['More content'] }
    ]
};

$('#example').content(demo);
await import('/components/layout/divider.js');
const { $ } = Lightview;

const demo = {
    div: {
        class: 'flex flex-col w-full',
        children: [
            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['Content above'] } },
            { Divider: { children: ['OR'] } },
            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['Content below'] } },
            { Divider: { color: 'primary', children: ['Primary'] } },
            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['More content'] } }
        ]
    }
};

$('#example').content(demo);
<script type="module" src="/components/layout/divider.js"></script>

<div class="flex flex-col w-full">
    <div class="card bg-base-300 p-4 rounded-box">Content above</div>
    <lv-divider>OR</lv-divider>
    <div class="card bg-base-300 p-4 rounded-box">Content below</div>
    <lv-divider color="primary">Primary</lv-divider>
    <div class="card bg-base-300 p-4 rounded-box">More content</div>
</div>

Props

Prop Type Default Description
horizontal boolean false Vertical divider (use in flex row)
color string - 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error'

Divider Gallery

Live examples using <lv-divider> custom elements.

Basic Divider

Content
Content

With Text

Login
OR
Sign Up

Horizontal (Manual)

Left
OR
Right

Colors

Primary Secondary Accent Success Warning Error

Text Position

Start End