Layout components | UI Showcase
WRNexus UI
Component category

Layout

15 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

15 componentsMultiple use cases43 live configurations
Content columnSupporting column
Layout

Columns

Create responsive balanced content columns with configurable count, gap, density, and maximum width.

Centered container content
Layout

Container

Constrain and align page content with responsive gutters and compact, wide, or full width options.

Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Layout

Custom Scrollbar

Theme-aware, responsive custom scrollbar component.

Layout

Divider

Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.

Public

Citizen support

Citizen services

Report incidents, request certificates, and find safety information.

Directory

Directory

Station directory

Locate offices, jurisdictions, contacts, and public service hours.

Live

Verified

Public updates

Publish official alerts, notices, advisories, and verified information.

Layout

Feature Grid

Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.

OneTwoThree
Layout

Grid

Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.

Abstract violet circle on a dark surface
Layout

Image

Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.

Layout

Layout Splitter

Theme-aware, responsive layout splitter component.

Header slot
Public page content
Footer slot
Layout

Public Page Shell

Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.

Standard section content
Layout

Section

Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.

Public services

Everything citizens need

Discover online services, directories, guidance, and verified public information.

Layout

Section Header

Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

  • Clear headings
  • Readable paragraphs
  • Consistent lists
Layout

Typography

Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.