Overview

Home
Full examples
Components
Documentation

Home
Patterns

Search nx-ui

Jump to any foundation, component, block or example.

Patterns

Marketing and landing-page blocks — the config-driven backdrop system, heroes, section scaffolding, feature rows and cards, CTAs, and social proof (logo cloud, testimonials, stats, FAQ). All props-driven, composed from the nx-ui component suite.

The config-driven decorative section backdrop: glow, texture (grid/dots/diagonal/crosshair/contours/topo), grain and a blueprint frame, with named presets and dark-aware ink.

Background patterns

A set of stock Untitled-UI CSS masked-grid backdrops (basic, fading and diagonal-cross variants) for a one-liner decorative layer.

The full-bleed navy call-to-action band, with split or centred layout and the accent CTA hover nudge.

A grouped FAQ composed on the nx-ui Accordion, styled as rounded cards that ring on open.

The flexible marketing card — default, dashed-outline and self-flipping on-brand variants, with an optional hover-lift link affordance.

An alternating image/copy feature row with an optional icon, eyebrow and checklist.

A lightweight standalone grid backdrop for brand bands, testimonials and stat cards — navy on light, accent-yellow on dark.

The two-column landing hero — headline and CTAs beside a media slot — with the CSS-only animated accent underline.

A numbered process with an animated gradient dashed connector, in horizontal or vertical orientation.

Living background

The nx-ui Living Background block.

A social-proof logo band as a CSS marquee (auto-scroll, reduced-motion aware) or a static grid.

Living material network

An interactive synthetic material market with site lifecycles, local matching and delivery simulation.

The scroll-reveal motion utilities — FadeIn, Stagger and StaggerItem plus the shared EASE constant.

The reusable interior/marketing hero with tone (default/brand) and align (left/center) variants, over a decorative backdrop.

The marketing layout backbone: Section (toned, padded band) plus Eyebrow and SectionHeading.

The navy marketing footer with a watermark, hairline divider, link columns and an optional theme toggle.

The marketing header — a sticky glassy bar with desktop mega-menus and a mobile popover menu, all props-driven.

The accent-on-navy metric treatment in three idioms: stat cards, a stat-plus-quote proof band, and an on-image overlay.

Customer testimonials on a dark brand band — a motion crossfade carousel or a static grid.