Divide

vel-src: divide.css

Utilities for adding borders between child elements.

Class	Properties
vel-divide-x	> * + * { border-left-width: 1px }
vel-divide-x-2	> * + * { border-left-width: 2px }
vel-divide-x-4	> * + * { border-left-width: 4px }
vel-divide-y	> * + * { border-top-width: 1px }
vel-divide-y-2	> * + * { border-top-width: 2px }
vel-divide-y-4	> * + * { border-top-width: 4px }
vel-divide-solid	> * + * { border-style: solid }
vel-divide-dashed	> * + * { border-style: dashed }
vel-divide-dotted	> * + * { border-style: dotted }
vel-divide-none	> * + * { border-style: none }
vel-divide-primary	> * + * { border-color: var(--vel-color-primary) }
vel-divide-neutral-300	> * + * { border-color: var(--vel-neutral-300) }
vel-divide-neutral-700	> * + * { border-color: var(--vel-neutral-700) }

Examples

Horizontal divide (vel-divide-x)

Section A

Section B

Section C

example.html

<div style="padding:1rem;background:#060b17;">
  <div class="vel-flex vel-divide-x vel-divide-solid vel-divide-primary" style="border-radius:6px;border:1px solid #1e2d45;overflow:hidden;">
    <div style="flex:1;padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Section A</div>
    <div style="flex:1;padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Section B</div>
    <div style="flex:1;padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Section C</div>
  </div>
</div>

Vertical divide (vel-divide-y)

Row 1

Row 2

Row 3

example.html

<div style="padding:1rem;background:#060b17;">
  <div class="vel-divide-y vel-divide-solid vel-divide-neutral-700" style="border-radius:6px;border:1px solid #1e2d45;overflow:hidden;">
    <div style="padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Row 1</div>
    <div style="padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Row 2</div>
    <div style="padding:12px 16px;color:#e2e8f0;font-size:0.85rem;">Row 3</div>
  </div>
</div>