Neo-Brutalist Angular Separator
Separator
A directive on <hr> for visual section dividers. Supports horizontal and vertical orientations with solid, dashed, and thick variants — a structural staple in every brutalist card layout.
Preview
Section A
Section B
Usage
Import
import { NbSeparator } from '@ng-brutalism/ui';Template
<hr nbSeparator />Variants
variant="solid" (default)
variant="dashed"
variant="thick"
Vertical
Set orientation="vertical" to render a column divider. The separator stretches to fill the height of its flex container.
Angular
Brutalism
v0.2
Brutalism
v0.2
Custom Color
Override --nb-separator-color inline to use any color without touching the global theme.
Customization
Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.
| Token | Default | Used for |
|---|---|---|
| --nb-separator-color | var(--nb-border) | Line color |
| --nb-separator-thickness | 2px (4px for thick) | Line thickness. Overrides the variant preset when set inline. |
| --nb-border | #000000 | Border color and focus ring color |
| --nb-shadow | #000000 | Offset shadow color |
| --nb-radius | 0rem | Corner radius through the rounded-nb utility |
| --nb-shadow-offset-x | 4px | Horizontal shadow and press offset |
| --nb-shadow-offset-y | 4px | Vertical shadow and press offset |
| --nb-foreground | #000000 | Default foreground text color |
| --nb-background | #ffffff | Default surface background color |
API
| Input | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the divider line. |
| variant | 'solid' | 'dashed' | 'thick' | 'solid' | Line style. thick renders a 4 px border. |