<arc-divider> Overview
Guidelines
When to use
- Use the subtle variant as a general-purpose content separator between sections
- Use line-gradient or line-primary as decorative breaks in hero and feature sections
- Place glow dividers sparingly to draw attention to major section transitions
- Combine with arc-section or arc-container to define clear visual boundaries
When not to use
- Stack multiple glow dividers close together — the shimmer effect becomes distracting
- Use line variants for dense UI layouts; their centered max-width leaves dead space
- Rely solely on the divider for semantic separation; use proper heading structure too
- Override the animation timing without testing prefers-reduced-motion behavior
Features
- Five visual variants: subtle, glow, line-white, line-primary, and line-gradient
- Animated shimmer on glow variant using a 6-second CSS keyframe cycle
- Centered decorative line variants with constrained max-width for elegant section breaks
- Box-shadow glow on line-primary and line-gradient for depth on dark backgrounds
- Built-in prefers-reduced-motion support that disables the shimmer animation
- Semantic role="separator" for assistive technology
- Exposed "divider" CSS part for external style customization
Preview
Left
Usage
<arc-divider></arc-divider>
<arc-divider variant="glow"></arc-divider>
<arc-divider variant="line-gradient"></arc-divider>
<!-- Labeled divider -->
<arc-divider label="OR"></arc-divider>
<!-- Left-aligned gradient -->
<arc-divider variant="glow" align="left"></arc-divider>
<!-- Vertical divider between inline elements -->
<div style="display: flex; align-items: center; gap: 16px; height: 40px;">
<span>Section A</span>
<arc-divider vertical variant="line-primary"></arc-divider>
<span>Section B</span>
</div>import { Divider } from '@arclux/arc-ui-react';
<Divider />
<Divider variant="glow" />
<Divider variant="line-gradient" />
{/* Labeled */}
<Divider label="OR" />
{/* Left-aligned */}
<Divider variant="glow" align="left" />
{/* Vertical */}
<div style={{ display: 'flex', alignItems: 'center', gap: 16, height: 40 }}>
<span>Section A</span>
<Divider vertical variant="line-primary" />
<span>Section B</span>
</div><script setup>
import { Divider } from '@arclux/arc-ui-vue';
</script>
<template>
<Divider></Divider>
<Divider variant="glow"></Divider>
<Divider variant="line-gradient"></Divider>
</template><script>
import { Divider } from '@arclux/arc-ui-svelte';
</script>
<Divider></Divider>
<Divider variant="glow"></Divider>
<Divider variant="line-gradient"></Divider>import { Component } from '@angular/core';
import { Divider } from '@arclux/arc-ui-angular';
@Component({
imports: [Divider],
template: `
<Divider></Divider>
<Divider variant="glow"></Divider>
<Divider variant="line-gradient"></Divider>
`,
})
export class MyComponent {}import { Divider } from '@arclux/arc-ui-solid';
<Divider></Divider>
<Divider variant="glow"></Divider>
<Divider variant="line-gradient"></Divider>import { Divider } from '@arclux/arc-ui-preact';
<Divider></Divider>
<Divider variant="glow"></Divider>
<Divider variant="line-gradient"></Divider><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-divider — requires divider.css + base.css (or arc-ui.css) -->
<div class="arc-divider">
<div class="divider" role="separator"></div>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-divider — self-contained, no external CSS needed -->
<style>
@media (prefers-reduced-motion: reduce) {
.arc-divider[data-variant="glow"] .divider::after { animation: none; }
}
</style>
<div class="arc-divider" style="display: block; width: 100%">
<div class="divider" style="width: 100%; height: 1px" role="separator"></div>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'subtle' | Visual style |
align | 'left' | 'right' | undefined | Shifts the gradient origin so it fades from one edge instead of both. Useful for asymmetric layouts where the divider should visually connect to content on one side. |
vertical | boolean | false | Renders the divider as a vertical line. Switches to `inline-flex` display and rotates gradient directions to run top-to-bottom. Use inside flex rows to separate inline content. |
label | string | '' | Text displayed in the center of the divider, splitting it into two lines. Common use: 'OR' between form options. Only applies to horizontal dividers. |