Sobeys Logo

Separator Component

The Separator component is a lightweight, flexible UI divider used to visually separate content blocks within layouts. It supports both horizontal and vertical orientations and can be styled with various colors using the powerful class-variance-authority (cva) utility for scalable theming.

It follows accessibility best practices using the role="separator" and the appropriate aria-orientation.

Key Features

  • Responsive Layout
  • Background Variants
  • Accessibility-Friendly
  • Composable & Lightweight
  • Extendable Styling

Section 1

This is some content above the separator.

Section 2

This is some content below the separator.

Left side content
Right side content