Neo-Brutalist Angular Split

Split

Use nbSplit for two-column main-and-aside compositions. It replaces custom grid column strings with ratio, gap, padding, alignment, and responsive collapse inputs.

7Ratios

4Collapse

2Children

Source ↗Open Docs

Preview

Main

Tokyo City Escape

A flexible content block for descriptions, product stories, profile bios, course details, and event summaries.

$799

Usage

Add nbSplit to the parent that owns two regions. Use ratio to size the columns and collapse to choose when they stack. Separators are centered in the split gap, so avoid pairing separator with gap="none".

Import

import { NbSplit } from '@ng-brutalism/ui';

Template

<div nbSplit ratio="2:1" gap="xl" padding="lg">
  <div nbStack gap="md">
    <h2 nbDisplay>Tokyo City Escape</h2>
    <p>Main content</p>
  </div>

  <div nbStack gap="md" align="start">
    <span>$799</span>
    <button nbButton>Book Trip</button>
  </div>
</div>

Ratios

1:1 mainAside

2:1 mainAside

3:1 mainAside

1:2 mainAside

1:3 mainAside

fill:auto mainAside

auto:fill mainAside

Gaps and Padding

gap none

gap xs

gap sm

gap md

gap lg

gap xl

gap 2xl

nonePad

smPad

mdPad

lgPad

xlPad

Collapse

Split stacks by default until the md breakpoint. Use collapse="none" for a permanent two-column split.

none

MainAside

Alignment

startAside

centerAside

endAside

stretchAside

Separators

solid mainAside

dashed mainAside

thick mainAside

Composition

CourseIntermediate

Design Systems Sprint

Stack and Cluster handle local rhythm. Split handles the larger main-and-aside card structure.

12 seats

API

Input	Type	Default	Description
ratio	'1:1' \| '2:1' \| '3:1' \| '1:2' \| '1:3' \| 'fill:auto' \| 'auto:fill'	'1:1'	Column relationship between main and aside content.
gap	'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'lg'	Spacing between the two split regions.
padding	'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'none'	Inner padding for the split container.
collapse	'none' \| 'sm' \| 'md' \| 'lg'	'md'	Breakpoint where the layout switches from stacked to two columns.
align	'start' \| 'center' \| 'end' \| 'stretch'	'stretch'	Cross-axis alignment for the two regions.
separator	'none' \| 'solid' \| 'dashed' \| 'thick'	'none'	Inline separator between the two regions. Use with a non-zero gap.