shadcn.io is not affiliated with official shadcn/ui
Magazine Cover Split Features Block for Solid
A release drawn as a magazine cover: a portrait cover with a huge version numeral over a small UI collage, beside a divider and a numbered list of what's inside, each with a New or Improved badge.
Installation
Overview
A release-notes feature section for Solid with Ark UI, shown for Issuelane, a newsletter tool. At the start, a portrait cover in a hairline frame with + marks on its corners: a masthead, a huge "v4" and a small collage of the editor, a send schedule and an open-rate sparkline, all drawn in your theme's greyscale. A divider separates it from a header and "What's inside": six numbered rows, each a heading, one sentence and a Badge saying New or Improved, ruled by hairlines that meet the page's rails with + marks. A link to the full notes closes the list. On a phone the cover comes first, shorter, with the list under it. It's built from Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release announcements, version launches and newsletters.
FAQ
How do I change what's inside?
Edit CHANGES at the top of the file: each entry has a title, a summary and isNew, which is true for a new feature (a filled badge) and false for an improvement (an outlined one). The numbers are made from the position in the list, and the "6 changes" count from its length, so adding a row needs no other edit.
Is the cover content or decoration?
Decoration. The cover repeats the release's name in a drawing, so it is hidden from screen readers and has nothing focusable inside. The real content is the heading, the list and the link, all in the order a screen reader reads them. Change the cover's words in the Cover and Collage components.
How is the list marked up for assistive technology?
It's an ordered list named "What's inside Issuelane 4", each row with a heading for the change and a sentence under it. The visible numbers and the label above the list are decorative, because the list already announces its position and its name.
Why are there lines and + marks?
The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. The split divider and each row's rule come from Guides too, which puts a + mark where a rule meets a rail or the divider. The cover has its own frame with + marks on the corners.
What moves, and what happens with reduced motion?
The header fades up once when the page loads, with a CSS transition, and the link's arrow nudges on hover. With reduced motion both are off and the section simply appears.
How does it fit on a phone?
The cover comes first at about 18 rem tall, rather than filling a column, then the list. The numerals, rows and badges keep their sizes, and a row's sentence wraps. Nothing scrolls sideways at 320 pixels, and the divider is a hairline between the cover and the list instead of a vertical line.