// Generated by scripts/generate-showcase.mjs. Do not edit directly. page LayoutShowcase { layout = "showcase" seo { title = "Layout components" description = "15 layout components from @wrnexus/ui." } view {
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.

Layout

Feature Grid

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

Layout

Footer

Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.

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

Kbd

Theme-aware, responsive kbd component.

Layout

Layout Splitter

Theme-aware, responsive layout splitter component.

Layout

Link

Render an accessible internal or external link with target, relation, size, color, and public focus or click events.

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.

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.

} }