Divider
Horizontal rule with multiple visual styles from subtle to glowing.
<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
- Do not Stack multiple glow dividers close together — the shimmer effect becomes distracting
- Do not use line variants for dense UI layouts; their centered max-width leaves dead space
- Do not rely solely on the divider for semantic separation; use proper heading structure too
- Do not 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
OR
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';
export default function Example() {
return (
<>
<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 variant="glow" />
<Divider variant="line-gradient" />
</template><script>
import { Divider } from '@arclux/arc-ui-svelte';
</script>
<Divider />
<Divider variant="glow" />
<Divider variant="line-gradient" />import { Component } from '@angular/core';
import { Divider } from '@arclux/arc-ui-angular';
@Component({
imports: [Divider],
template: `
<arc-divider></arc-divider>
<arc-divider variant="glow"></arc-divider>
<arc-divider variant="line-gradient"></arc-divider>
`,
})
export class MyComponent {}import { Divider } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Divider />
<Divider variant="glow" />
<Divider variant="line-gradient" />
</>
);
}import { Divider } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Divider />
<Divider variant="glow" />
<Divider variant="line-gradient" />
</>
);
}<!-- 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
-
variant'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient''subtle' - Visual style
-
verticalbooleanfalse - 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.
-
labelstring'' - Text displayed in the center of the divider, splitting it into two lines. Common use: 'OR' between form options. Only applies to horizontal dividers.
-
align'left' | 'right' - 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.