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 Flex with align="center" or give it a fixed height.

#124

Horizontal

Section A content

Section B content

Section C content

Reference #124 · Pick in the gallery

Code

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

<Card material="glass" p="6" full>
  <Stack gap="4">
    <p>Section A content</p>
    <Divider />
    <p>Section B content</p>
    <Divider />
    <p>Section C content</p>
  </Stack>
</Card>

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

#125

Vertical

Left

Center

Right

Reference #125 · Pick in the gallery

Code

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

<Card material="glass" p="6" full>
  <Flex gap="6" align="center">
    <p>Left</p>
    <Divider orientation="vertical" />
    <p>Center</p>
    <Divider orientation="vertical" />
    <p>Right</p>
  </Flex>
</Card>

<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.