Blocks/Showcase(47)

Interactive product showcases with hotspots and detailed views.

PRO

showcase50

Downloadable Resource Cards

Three resource cards, each led by a preview image and stamped with its format, holding the title, one line on what is inside, and a seal download button pinned to the bottom of the card.

PRO

showcase49

Quick Actions Showcase

A centered showcase with an eyebrow, light heading, and paragraph over a wide image tile that floats a live quick-actions bar, followed by a four-up grid of icon-led action descriptions.

PRO

showcase48

Connected Flow Pipeline

A horizontal pipeline with an eyebrow over a hairline rule and a two-column heading, where three image tiles float live micro-assets as connected stages joined by directional arrows.

PRO

showcase47

Layered Product Scene

A split showcase pairing copy, checked bullets, and an accent button with a gradient canvas where two live micro-assets float at staggered depths for a layered product scene.

PRO

showcase46

Tabbed Product Tour

A tabbed showcase with an eyebrow over a hairline rule and a two-column heading, where each tab reveals a light title, checked bullets, and an image tile floating a live product micro-asset.

PRO

showcase45

Alternating Asset Rows

A showcase of alternating split rows, each pairing an image tile that floats a live product micro-asset with an eyebrow, a light heading, a paragraph, and a checked bullet list.

PRO

showcase43

Featured Project Dossier

A single featured project with a tall image and a meta column of client/role/year rows, a paragraph, and a CTA.

PRO

showcase42

Mosaic Frame Gallery

An asymmetric mosaic image gallery with mixed-span tiles and monospace frame captions.

PRO

showcase41

Editorial Project Index

A ruled, type-forward project index where each row reveals a floating thumbnail on hover.

PRO

showcase40

UI Bento Showcase

Bento mosaic mixing product screenshots with text and accent tiles.

PRO

showcase39

Tabbed Showcase

Tabbed product screenshots in a browser frame with captions.

PRO

showcase38

Sticky Showcase

A pinned product image beside a scrolling list of feature steps.

PRO

showcase37

Showcase Scroller

Horizontally scrollable row of wide product showcase frames with captions.

PRO

showcase36

Annotated Showcase

Browser-framed product screenshot with surrounding feature callouts.

PRO

showcase35

Migration Before And After

Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required.

PRO

showcase34

Polyglot Code Comparison

Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required.

PRO

showcase33

Regex Pattern Tester

Browser-chrome card hosting a regex playground — pattern + active flag pills up top, test rows with inline match highlights and capture column, summary footer. Every label is editable; no media props required.

PRO

showcase32

GraphQL Query Plus Response

Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.

PRO

showcase31

TypeScript Types Plus Usage

Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required.

PRO

showcase30

Live Spreadsheet With Formula Bar

Browser-chrome card rendering a live spreadsheet — formula bar with cell reference, typed columns, status-toned cells, and a selected total cell with outline ring. Every label is editable; no media props required.

PRO

showcase29

AI Workspace With Streaming Response

Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.

PRO

showcase28

Markdown Editor With Live Preview

Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.

PRO

showcase27

Inline Diff Viewer

Browser-chrome card rendering an inline diff — added lines glow emerald, removed lines fade rose, branch arrow row in the header, and an approve-and-merge footer. Every label is editable; no media props required.

PRO

showcase26

Code Editor With Command Palette

Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.