Composition

Surface & Section

nbSurface creates the outer brutalist container. nbSection creates internal regions. Together they replace repeated card shell markup with a clear, intentional structure.

How they relate

nbSurface

The outer container. Owns the tone, radius, shadow, and border of the whole card shell. Use clip to keep inner regions within the surface radius.

nbSection

An inner region. Owns its own padding and optional divider borders. Use divider="top" or divider="bottom" to structure the panel into clear zones. Use divider="block" for top + bottom and divider="inline" for left + right.

Basic panel

A surface with a header region and a body region — the minimal card shell.

Profile

Chunky card shell with clear regions.

Header / body / footer

Three sections with a top and bottom divider create a structured panel layout. The footer uses layout="between" to push its two children to opposite ends.

Campaign draft

Draft

Body content lives here. Stack controls the vertical rhythm inside the section.

AngularSignals

The clip input

When a surface has a non-zero radius, add clip so that section backgrounds, dividers, and other inner content respect the outer rounded corners. Without clip, inner backgrounds bleed through the corners.

With clip

The pushed-out dot and stripe are cut at the rounded edge.

Without clip

The same inner children spill past the surface radius.

When to use Surface & Section

Reach for this pattern when…

You need a card, panel, docs example, callout shell, dashboard widget, or recipe card

The UI has distinct header, body, and footer zones

You want dividers to feel intentional rather than manually applied

You want the outer shape (radius, shadow, border) defined in one place

Key inputs

tonenbSurface

Color theme — cream, yellow, pink, mint, lavender, black, white, etc.

radiusnbSurface

Corner shape — none, xs, sm, md, lg, xl, full

shadownbSurface

Brutalist offset depth — none, sm, default, hard, heavy

bordernbSurface

Outline strength — none, thin, default, strong, thick

clipnbSurface

Boolean. Clips inner content to the surface radius.

paddingnbSection

Internal space — none, xs, sm, md, lg, xl

dividernbSection

Divider position — top, bottom, left, right, block (top + bottom), inline (left + right), all, none

layoutnbSection

Flex layout — default, center, between

See the full APIs: Surface and Section.