Component Showcase (Test Post)

2026-07-25

Category: Layout Guardrails

Rebuilt to actually use everything currently available — every layout primitive, every state primitive, every purpose-built component. Not a real article; a working reference. Safe to remove once it's served its purpose.

Callouts

Info: neutral, supporting detail.

Success: something confirmed working.

Warning: worth pausing on.

Danger: a real risk or hard limit.

Layout: stack, wrap, card, reveal

A row stack, three cards, one featured, each revealing on scroll:

Fast

Zero client JS by default.

Safe

Content can't execute anything.

Simple

Git is the database.

The same idea as a wrap, reflowing naturally:

Reflow One Reflow Two Reflow Three

Columns — fractional splits

Narrower column.

Wider column — the main point.

Carousel

Placeholder one

Placeholder two

Placeholder three

Section widths

A full-bleed hero placeholder

Back to standard width here.

Counter

Real MCP tools Loops, for a live/ongoing metric feel

Toggle + select-group: tabs, a reveal panel, and a like button

Tab One

Tab Two

Content for tab one.

Show more detail

Like this post — a plain toggle with no target, just flips its own state.

Back to top · Copy this page's text · Share

Marquee strip

Git-native

MCP-driven

Zero standing servers

Safe by construction

Image compare

After

Before

Video embed

Code, two languages

def sanitize(html: str) -> str:
    return allowlist.clean(html)

function sanitize(html: string): string {
  return allowlist.clean(html);
}

Table

Tier	Writes directly?
Content	Yes, an agent can
Execution	No, never

Figure, figcaption, aside, hr, details

A figure-wrapped placeholder — A real caption via figure/figcaption.

Click to expand

Native, zero-JS collapsible content.

Buttons

Primary Secondary