Skip to content

Bento & Layout

Divider Variants

Solid, dashed, gradient-fade, and labelled divider variants with correct semantic markup for each.

FreeMIT licensed. Install it with the CLI — no account, no key.
$velocityx add divider
Props & docs
AstroReactTailwind CSSNew

Divider Variants

Divider Variants

Live preview of the Divider Variants component

solid

dashed

gradient (on dark)

labelled

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Divider Variants component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Bento & Layout components

Browse all →

Full-Bleed Section

Escapes a centred max-width container to span the full viewport using the calc(50% - 50vw) technique, with a re-centred inner column.

Split 50/50 Section

Even two-column split section that stacks to one column on mobile, with an optional mobile reorder flag.

Split 60/40 with Sticky Side

60/40 split section where one column sticks in the viewport while the other scrolls past it, desktop only.

Three-Column Feature Row

Classic three-feature row that collapses to two then one column per breakpoint.

Sticky Sidebar + Scrolling Content

Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only.

Masonry Column Layout

Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS.