<!-- @dsCard group="Components / Layout" viewport="700x310" name="Separator" subtitle="A 1px rule that divides content within a surface — between a card header and body, or between toolbar groups." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Separator</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Separator</h1><p>A 1px rule that divides content within a surface — between a card header and body, or between toolbar groups.</p></header>
<div id="root"></div>
<ul class="notes">
<li>Vertical separators stretch to their flex parent, so give the row a height or the separator an explicit one.</li>
<li>Divide content inside one surface. Between surfaces the card border already does the work.</li>
<li>In auth, one Separator carrying &ldquo;or&rdquo; divides providers from the email form.</li>
</ul>
<script type="text/babel">
const {Separator} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <div className="o-card" style={{padding:16,maxWidth:340}}>
    <div className="o-stack" style={{gap:12}}>
      <div style={{fontWeight:500}}>Booking details</div>
      <Separator />
      <p className="o-muted" style={{fontSize:13}}>Tue 12 Aug · 14:00 CET · 30 minutes</p>
    </div>
  </div>
  <div className="spec"><span className="spec-label">Vertical</span>
    <span className="o-muted" style={{fontSize:13}}>Draft</span><Separator orientation="vertical" style={{height:20}} />
    <span className="o-muted" style={{fontSize:13}}>Edited 2h ago</span><Separator orientation="vertical" style={{height:20}} />
    <span className="o-muted" style={{fontSize:13}}>3 hosts</span>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>