Divider
Horizontal or vertical divider line with optional label (e.g. OR)
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Divider</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npx rizzo-css add Divider
pnpm dlx rizzo-css add Divider
npx rizzo-css add Divider
bunx rizzo-css add Divider
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Divider from '../components/astro/Divider.astro';
---
<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />
<!-- Rizzo CSS. No script needed. -->
<div class="divider"></div>
<div class="divider divider--label" data-label="OR"></div>
<script>
import { Divider } from '$lib/rizzo';
</script>
<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />
<script setup>
import Divider from '@/components/rizzo/Divider.vue';
</script>
<template>
<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />
</template>
import { Divider } from './components/react';
<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />
Other frameworks: Astro · Vanilla · Svelte · Vue