shadcn.io is not affiliated with official shadcn/ui
Editorial Spreads Gallery Block for Svelte
An editorial spread you turn: three differently laid out spreads of a food-and-travel magazine, each with a drop cap, a pull quote and drawn pictures, turned with a pager or the arrow keys.
Installation
Overview
A magazine for Svelte with Ark UI. A header with a pager (Previous, spreads 1 to 3, Next) and a "Spread 1 of 3" line sits over one spread at a time, under a hairline rule that ends the block. The first spread sets a text column with a drop cap beside a large picture and two small ones; the second puts a portrait picture at the start beside a pull quote and two small pictures; the third runs a wide picture over three columns. A hairline divider with a + mark separates text from pictures. The three spreads share one grid cell, the others unseen, so the tallest sets the height and turning never moves the page. The arrow keys (Home and End too) turn them while focus is inside the block. The pictures are drawn in the theme's greys, never photographed. It's built from Pagination, Badge and Guides. For magazines, annual reports, long reads and any story told in layouts.
FAQ
How do I turn a spread?
Click Previous, Next or a number, or press the arrow keys, Home or End while focus is on the pager or the spreads region. In a right-to-left layout the arrows follow the reading direction. The ends of the pager are aria-disabled and out of the tab order.
Is the pager real navigation?
?spread=n address, and a click turns the spread in place.A polite status line says "Spread 2 of 3".Does the page move when I turn?
No. All three spreads sit in one grid cell, the hidden ones invisible, aria-hidden and inert; the tallest sets the height, and a spread that is shorter has some air under it. Changing spreads cross-fades (not under reduced motion).
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.