Separator

A 1px rule that splits sections. Horizontal by default, decorative so it stays out of the accessibility tree.

Horizontal

Section 1

First block of copy in the stack.

Section 2

Second block of copy in the stack.


        
          1
          
          <div>
        

          2
          
            <h3>Section 1</h3>
        

          3
          
            <p>First block of copy.</p>
        

          4
          
          </div>
        

          5
          
          <Separator />
        

          6
          
          <div>
        

          7
          
            <h3>Section 2</h3>
        

          8
          
            <p>Second block of copy.</p>
        

          9
          
          </div>

Vertical

The parent must be a flex row with a height. The rule stretches with self-stretch.

Home

About

Services

Contact


        
          1
          
          <div class='flex h-8 items-center gap-4'>
        

          2
          
            <p>Home</p>
        

          3
          
            <Separator orientation='vertical' />
        

          4
          
            <p>About</p>
        

          5
          
          </div>

Orientation

Horizontal

Content above

Content below

Vertical

Left

Center

Right


        
          1
          
          <Separator orientation='horizontal' />
        

          2
          
          <Separator orientation='vertical' />

Best practices

Separate sibling blocks, not every line. Space plus type already groups most copy.
Default decorative is correct for visual rules. Set :decorative="false" only when the split is a real landmark.
Vertical separators need a flex parent with a height. A block parent collapses the 1px column to nothing.
Color is --ds-gray-alpha-400. Do not recolor it per section.
Menus and toolbars can use a short vertical rule. Page layout uses a full-width horizontal one.