Neo-Brutalist Angular Section

Section

Use nbSection for the internal regions of a card — headers, body blocks, and footers. It replaces ad-hoc border-t-2 px-6 py-6 wrappers with a small declarative primitive for padding, border side, and inline layout.

PaddingRegion spacing
DividerSide placement
LayoutRegion flow
Source ↗Open Docs

Preview

Project

Alpha Launch

Active

Section owns the inner regions of a card. Drop headers, body blocks, and footers without rewriting padding or border utility classes every time.

12 collaborators

Usage

Add nbSection to the wrapper around any region inside a surface or card. Pair it with padding, divider, and layout to compose headers, content, and footers without ad-hoc utility classes.

Import
import { NbSection } from '@ng-brutalism/ui';
Template
<div nbSurface tone="cream" shadow="hard" radius="lg" clip>
  <div nbSection divider="bottom" padding="lg" layout="between" align="center">
    <h2 nbDisplay>Alpha Launch</h2>
    <span nbChip tone="mint">Active</span>
  </div>

  <div nbSection padding="lg">
    <p>Section owns the inner regions of a card.</p>
  </div>

  <div nbSection divider="top" padding="lg" layout="between" align="center">
    <span>12 collaborators</span>
    <button nbButton>Open project</button>
  </div>
</div>

Paddings

Padding is the most common knob. Inline layouts (headers, footers, toolbars) usually take md to lg; hero rows take xl.

padding none
content
padding xs
content
padding sm
content
padding md
content
padding lg
content
padding xl
content

Dividers

Sections share --nb-border and --nb-border-width with the rest of the system, so a single side never goes out of sync. Use block for top + bottom or inline for left + right; all for a fully outlined region.

divider top
line above
divider right
line on the right
divider bottom
line below
divider left
line on the left
divider block
top + bottom
divider inline
left + right
divider all
fully outlined

Divider styles

solid
solid edge
dashed
dashed edge
dotted
dotted edge

Layouts

layout="default" keeps block flow. layout="center" and layout="between" switch to flex with sensible justify defaults — pair with align for cross-axis control.

layout default block flow
Lead Trail
layout center flex, justify-content: center
Lead Trail
layout between flex, justify-content: space-between
Lead Trail

Composition

Section pairs naturally with Surface (the outer shell) and Stack / Cluster (the inner rhythm). The mental model is: Surface owns the card, Section owns each region inside it.

Pro plan

Design Sprint

Annual

Three weeks of guided sessions, live critiques, and a final brutalist showcase. Bring your most ambitious card layout — we'll ship it together.

12 seatsCohort starts Jun 3
$799

API

Input Type Default Description
padding 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Inner padding for the section.
divider 'none' | 'top' | 'right' | 'bottom' | 'left' | 'block' | 'inline' | 'all' 'none' Which side(s) render a divider line. Uses --nb-border and --nb-border-width.
dividerStyle 'solid' | 'dashed' | 'dotted' 'solid' Stroke style applied to the active border side(s).
layout 'default' | 'center' | 'between' 'default' default keeps block flow, center and between switch to flex with the matching justify.
align 'stretch' | 'start' | 'center' | 'end' 'stretch' Cross-axis alignment; only applies when layout is center or between.
flush boolean false Pulls the section out to its parent's edges via negative inline margins. Escape hatch for advanced card layouts.