Vue Divide Utilities

Divide

Draw a border between children without one on the outer edges, for lists of rows and rows of actions.

Class	Styles
.divide-x	border-inline-start: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color);
.divide-x-0	border-inline-start: 0;
.divide-y	border-block-start: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color);
.divide-y-0	border-block-start: 0;

On this page

Overview

divide-x and divide-y draw a border between children — every child except the first gets a border on its leading edge — so a list of rows or a row of actions gets its separators without a border on the outer edges and without marking up the last item differently.

First

Second

Third

vue

<div class="divide-y border rounded">
  <div class="p-3">First</div>
  <div class="p-3">Second</div>
  <div class="p-3">Third</div>
</div>

divide-x separates along the inline axis and follows the writing direction.

First

Second

Third

vue

<div class="d-flex divide-x border rounded">
  <div class="p-3">First</div>
  <div class="p-3">Second</div>
  <div class="p-3">Third</div>
</div>

The dividers take the global --cui-border-width, --cui-border-style and --cui-border-color, so they follow a theme like every other border.

Both are responsive, which is what makes a list that changes direction work: the dividers can switch axis at a breakpoint instead of being written twice.

First

Second

Third

vue

<div class="d-md-flex divide-y divide-y-md-0 divide-x-md border rounded">
  <div class="p-3">First</div>
  <div class="p-3">Second</div>
  <div class="p-3">Third</div>
</div>

divide-y separates the stacked rows, divide-y-md-0 removes those separators once the items line up, and divide-x-md draws them between the columns instead. The -0 step exists for both axes at every breakpoint, so a divider can be dropped anywhere it stops making sense.

The rule is wrapped in :where() and therefore adds no specificity — a child with its own border wins on its own.

Customizing

Sass variables

Divide utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss

"divide-x": (
  responsive: true,
  property: border-inline-start,
  class: divide-x,
  child-selector: "> :not(:first-child)",
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  )
),
"divide-y": (
  responsive: true,
  property: border-block-start,
  class: divide-y,
  child-selector: "> :not(:first-child)",
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  )
),