Demo · template

Case Study Example: Demo Elements

Text blocks and elements for quickly building a longread

The media for the demo is located in public/assets/ (the page builder does not copy them). See public/assets/README.md.

Context

This section shows an example of a text block for the introduction. Here, you can briefly describe the product, the audience, and the project’s limitations. The text is neutral: the goal is to quickly sketch out the structure and check the page’s visual rhythm.

Task

We need to put together a demo longread with the main UI elements: link cards, media blocks, and examples of content layout. It’s also important to check how the blocks behave on narrow and wide screens.

Solution

Below are some ready-made examples that you can copy into real-world projects.

Link Cards

Source with preview Short caption: what the user will see when they click the link www.examples.com Source with favicon Option for simpler links without a screenshot www.examples.com/docs

Image: 50% of the original size (no preview)

Full-size demo GIF — Image at reduced actual size, centered.

Image: width of the content (with preview)

Demo images based on content width — Image matches the width of the content. Clicking opens the viewer.

Image: slightly wider than the content (with preview)

The demo image is wider than the content — The image extends slightly beyond the content column.

Long screenshot: collapsed height and button inside the preview

Block data-case-tall-media: width is specified by the data-case-tall-width="wide" (like a “wide” image) or content (per column). When collapsed, the top part of the frame is visible; at the bottom of the preview, there’s a solid “fog.” An “Expand” / “Collapse” button with a chevron icon appears above the bottom of the frame, inside the border; when expanded, the fog disappears; when collapsed, the page scrolls back to the preview. The preview height is set .case-media-tall__clip via --case-tall-max (default min(70vh, 32rem)).

Demo: Long vertical screenshot of the interface — Long image `img-long.webp` (source PNG next to it in `public/assets/template-elements-demo/`).

Gallery: grid based on content width

The number of columns on a wide screen is set via figure: the style="--case-gallery-cols: 3". Below these thresholds, the grid collapses to two or one column. Clicking on a thumbnail opens the general case viewer.

Demo Thumbnail 1 — Grid in an article column; in this example, three columns on a desktop.

Demo Thumbnail 2 — Grid in an article column; in this example, three columns on a desktop.

Gallery: Full-page grid with side margins

The case-media-gallery--wide — same logic for extending beyond a column as in the single-column case-media--wide. Here, there are four columns on a wide screen (--case-gallery-cols: 4).

Wide shot, frame 1 — Width is the same as for a `wide` image; on a narrow screen, the `wide` wrapper collapses to 100% of the column width (see media queries).

Wide shot, take 2 — Width is the same as for a `wide` image; on a narrow screen, the `wide` wrapper collapses to 100% of the column width (see media queries).

Slider: one image, arrows, and dots

Block .case-media-slider displays slides one at a time: navigation using “prev/next” arrows, paging using dots (the active one is highlighted in accent color). Keyboard support (←/→, Home/End on dots), touch/mouse swipe, and lazy loading of adjacent frames via data-src. Clicking on the active slide opens the general case viewer.

The same slider, but with the modifier case-media--wide — extends beyond the content column, like single wide images. The previous/next buttons and dots behave the same way.

Slider with horizontal (wide) frames of the same size—all images 1024×800.

The same slider, but with vertical frames of the same size—all images 600×800.

A separate example: a toggle for the frame-switching animation mode— slide (slide), fade (crossfade), and none (no transition). The mode is set by the attribute data-slider-anim on the shape.

Callout: Important paragraph with an emoji

Video: Card with a shadow and fixed small corners

An example of a case-style video card.

Result

The template is ready to be copied into a new case study: all that’s left is to replace the fish with the actual text and insert the project’s real links and media.