Neo-Brutalist Angular Halftone

Halftone

A decorative dot-grid component that anchors to card corners via absolute positioning or renders as a clean rectangular strip. The classic halftone pattern borrowed from print design adds depth and texture to brutalist cards without cluttering the layout.

CSSRectangle strip

Source ↗Open Docs

Preview

Card with halftone

Dot grid anchors to the bottom-right corner.

Usage

Place <div nbHalftone> inside a relative overflow-hidden container. Position it with Tailwind classes (absolute, top-*, right-*, etc). The component is decorative (aria-hidden="true").

Import

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

Template

<div
  class="relative overflow-hidden border-2 border-(--nb-border) bg-nb-paper p-8 shadow-[5px_5px_0_0_var(--nb-shadow)]"
  style="min-height: 140px;"
>
  <div nbHalftone class="absolute bottom-0 right-0"></div>
  <p class="font-bold text-lg">Card with halftone</p>
  <p class="font-medium text-sm mt-1">Dot grid anchors to the bottom-right corner.</p>
</div>

Custom Color & Positioning

Custom dot colors

Rectangle

Use rectangle halftone as a decorative strip behind headings, badges, image cards, recipe accents, and banner edges. Rows and columns give you a predictable dot count, while size and gap inputs tune the visual rhythm.

Graphic strip accent

A rectangular dot matrix with a predictable 3 by 13 count.

API

Input	Type	Default	Description
shape	'square' \| 'circle' \| 'rectangle'	'square'	Visual shape. Rectangle renders a CSS background strip.
color	string	var(--nb-border)	Dot fill color (any CSS color value).
rows	number	7 / 3 rectangle	Number of dot rows.
columns	number	7 / 13 rectangle	Number of dot columns.
size	number	6 / 8 rectangle	Dot diameter in px.
gap	number	5 / rectangle rhythm	Gap between dots in px. Rectangle strips use this as both axes unless gapX or gapY is set.
gapX	number	28 rectangle	Horizontal rectangle dot rhythm in px.
gapY	number	27 rectangle	Vertical rectangle dot rhythm in px.