GkDivider

One-pixel divider using border tokens. Exposes role="separator" and aria-orientation.

When to use

Use to separate related chunks of content in lists, cards, forms, and toolbars.

Live Examples

Horizontal

Separates stacked blocks.

Above

Below

vue

<script setup lang="ts">
import { GkDivider } from 'god-kit/vue'
</script>

<template>
  <div>
    <p class="gk-doc-p">
      Above
    </p>
    <GkDivider />
    <p class="gk-doc-p">
      Below
    </p>
  </div>
</template>

<style scoped>
.gk-doc-p {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

Vertical

Inline flex groups with a vertical separator.

Left

Right

vue

<script setup lang="ts">
import { GkDivider } from 'god-kit/vue'
</script>

<template>
  <div class="gk-doc-inline">
    <span>Left</span>
    <GkDivider orientation="vertical" />
    <span>Right</span>
  </div>
</template>

<style scoped>
.gk-doc-inline {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
  min-height: 2rem;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

Inside container

Combine with GkContainer for page-width rhythm.

In container

Below divider

vue

<script setup lang="ts">
import { GkContainer, GkDivider } from 'god-kit/vue'
</script>

<template>
  <GkContainer max-width="sm">
    <p class="gk-doc-p">
      In container
    </p>
    <GkDivider />
    <p class="gk-doc-p">
      Below divider
    </p>
  </GkContainer>
</template>

<style scoped>
.gk-doc-p {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

API

Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Layout

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Use orientation=\"vertical\" when dividing inline groups so assistive tech gets the right separator orientation.
• Avoid decorative overuse; separators should reinforce meaningful grouping.

Related components

• GkStack
• GkContainer
• GkNavigationDrawer