Composition
Split Layouts
nbSplit creates two-region layouts — hero sections, media/content pairs, sidebar layouts, pricing sections, and profile cards. It replaces repeated grid boilerplate with a single, responsive primitive.
How it works
Split uses a CSS grid with two columns. The ratio input controls the column proportion. The collapse input sets the responsive breakpoint where the two columns stack vertically.
<!-- Equal columns -->
<section nbSplit ratio="1:1" gap="lg" collapse="md">...</section>
<!-- Wide main + narrow aside (2:1) -->
<section nbSplit ratio="2:1" gap="lg" collapse="md">...</section>
<!-- Very wide main + narrow panel (3:1) -->
<section nbSplit ratio="3:1" gap="xl" collapse="lg">...</section>
<!-- Fixed aside, flexible main -->
<section nbSplit ratio="fill:auto" gap="lg" collapse="md">...</section>Hero split
A wide main area paired with a narrower aside — a typical hero layout. The aside stacks below on small screens when collapse="md".
Build loud.
Stay sharp.
Composition primitives for brutalist Angular UIs.
Media / content split
Equal columns — a media placeholder on the left and rich content on the right. Classic recipe card or feature block pattern.
Recipe card
Use split layouts for visual/content compositions. The left side holds an image or media frame; the right holds structured content.
Key inputs
ratioColumn proportions — 1:1, 2:1, 3:1, 1:2, 1:3, fill:auto, auto:fill
collapseBreakpoint where columns stack — none, sm, md, lg
gapSpace between the two columns — xs, sm, md, lg, xl
alignCross-axis alignment — start, center, end, stretch
separatorVertical divider — none, solid, dashed, thick
paddingInner padding on the split container — xs, sm, md, lg, xl
See the full API: Split.