Components · Layout

Divider

A thin rule that separates blocks of content — full-width, with a label, or a vertical hairline.

Examples

Orientation

Style

Text align

Emphasis

Horizontal · plain rule · labelled (heading) · left · dashed

Section one

Details

Section two

Section three

optional note

Section four

Section five

Vertical · inline hairlines

Edit

Preview

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-divider> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-divider.js';   // registers <aha-divider>
</script>

<p>Section one</p>
<aha-divider></aha-divider>
<p>Section two</p>
<aha-divider>Details</aha-divider>                 <!-- centred heading label -->
<p>Section three</p>
<aha-divider align="left" plain>optional note</aha-divider>  <!-- left, quiet regular label -->
<p>Section four</p>
<aha-divider dashed></aha-divider>                  <!-- dashed rule -->
<p>Section five</p>

<div style="display:flex; align-items:center">
  <span>Edit</span>
  <aha-divider orientation="vertical"></aha-divider>
  <span>Preview</span>
  <aha-divider orientation="vertical"></aha-divider>
  <span>Share</span>
</div>

import '@ahaslides-product/design/aha-divider';   // registers <aha-divider>

// The custom element renders identically in React — no wrapper needed for a static primitive.
function Section() {
  return (
    <>
      <p>Section one</p>
      <aha-divider />
      <p>Section two</p>
      <aha-divider>Details</aha-divider>                {/* centred heading label */}
      <p>Section three</p>
      <aha-divider align="left" plain>optional note</aha-divider>  {/* left, quiet regular */}
      <p>Section four</p>
      <aha-divider dashed />                            {/* dashed rule */}
    </>
  );
}

// Vertical hairline between inline actions
<div style={{ display: 'flex', alignItems: 'center' }}>
  <span>Edit</span>
  <aha-divider orientation="vertical" />
  <span>Preview</span>
</div>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-divider';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<template>
  <p>Section one</p>
  <aha-divider />
  <p>Section two</p>
  <aha-divider>Details</aha-divider>                <!-- centred heading label -->
  <p>Section three</p>
  <aha-divider align="left" plain>optional note</aha-divider>  <!-- left, quiet regular -->
  <p>Section four</p>
  <aha-divider dashed />                            <!-- dashed rule -->

  <div style="display:flex; align-items:center">
    <span>Edit</span>
    <aha-divider orientation="vertical" />
    <span>Preview</span>
  </div>
</template>

API

Prop	Type	Default	Notes
`orientation`	horizontal \| vertical	`horizontal`	Horizontal rule or an inline vertical hairline
`align`	left \| center \| right	`center`	Where the slotted label sits along a horizontal rule
`dashed`	boolean	`false`	Render the rule as a dashed line
`plain`	boolean	`false`	Drop the label from heading emphasis (bold, text-default) to a quiet regular note (400, text-secondary)

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-divider';   // registers <aha-divider>

Agent feed for this component (absolute, fetchable anywhere): divider.agent.json · divider.md · divider.llms.txt

When to use

Divider — separating stacked sections, list groups, or toolbar items
Space — you only need consistent gaps, not a visible line
whitespace — the separation reads clearly without any rule — prefer less chrome

A divider is quiet structure — keep it 1px and on the border token. Use a label only when the section genuinely needs naming; reach for whitespace before adding a rule.

Surfaces

editor dashboard settings audience

Spec

Rule 1px solid, border #E3E3E3 · Label (heading) Plus Jakarta SemiBold 600, 13/22, text-default #1A1A1A · Label (plain) `plain` → Regular 400, text-secondary #4A4A4A · Align label center (default) · left · right; the short leg becomes a 24px stub · Gap 12 between rule and label · Vertical 1px left hairline, 1em tall, 0 8 margin · Dashed `dashed` swaps the rule to a dashed border