Display

Divider

Horizontal and vertical separators drawn with outline tokens.

<script>
  import { Divider } from "@codeatlasdev/ui";
</script>

<Divider />
<Divider orientation="vertical" />

A vertical divider stretches to the height of its flex container, so place it inside a Row with align="center" or a fixed height.

Horizontal

Section A content

Section B content

Section C content

Code

<script lang="ts">
  import { Divider, GlassCard, Stack } from '@codeatlasdev/ui';
</script>

<GlassCard padding="24px" full>
  <Stack gap={16}>
    <p>Section A content</p>
    <Divider />
    <p>Section B content</p>
    <Divider />
    <p>Section C content</p>
  </Stack>
</GlassCard>

<style>
  p { margin: 0; font-size: var(--ca-font-size-body1); color: var(--ca-text-secondary); }
</style>

Vertical

Left

Center

Right

Code

<script lang="ts">
  import { Divider, GlassCard, Row } from '@codeatlasdev/ui';
</script>

<GlassCard padding="24px" full>
  <Row gap={24} align="center">
    <p>Left</p>
    <Divider orientation="vertical" />
    <p>Center</p>
    <Divider orientation="vertical" />
    <p>Right</p>
  </Row>
</GlassCard>

<style>
  p { margin: 0; font-size: var(--ca-font-size-body1); color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator.
`class`	`string`	`''`	Extra class names.